{"componentChunkName":"component---src-pages-slides-js","path":"/slides/","webpackCompilationHash":"c021816e17e59e08b77b","result":{"data":{"decks":{"edges":[{"node":{"id":"7bf4900f-7fa9-5670-b1e8-c123b835ddd3","body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"npm-run-test\",\n  \"title\": \"前端测试\",\n  \"theme\": \"code\",\n  \"date\": \"2020-11-15 18:16:01\",\n  \"published\": true\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst Split = makeShortcode(\"Split\");\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"\\u524D\\u7AEF\\u6D4B\\u8BD5\\u7684\\u90A3\\u4E9B\\u4E8B\"), mdx(\"h2\", null, \"Something about Testing\"), mdx(\"p\", null, \"\\u5206\\u4EAB\\u524D\\u7AEF\\u6D4B\\u8BD5\\u7684\\u4E00\\u4E9B\\u89C2\\u70B9\\u548C\\u89C4\\u8303\"), mdx(\"div\", {\n    style: {\n      fontSize: \".5em\"\n    }\n  }, \"/ ** \\u6280\\u672F\\u56E2\\u961F\\u5206\\u4EAB \\xB7 \\u524D\\u7AEF \\xB7 Ubug ** /\"), mdx(\"hr\", null), mdx(\"h3\", null, \"\\u5FC5\\u8981\\u6027\\u548C\\u987B\\u77E5\"), mdx(\"div\", {\n    style: {\n      textAlign: \"68vw\"\n    }\n  }, mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u524D\\u7AEF\\u5982\\u679C\\u8FFD\\u6C42\\u65B0\\u529F\\u80FD\\u548C\\u7279\\u6027\\uFF0C\\u5065\\u58EE\\u6027\\u95EE\\u9898\\u8FDF\\u65E9\\u9700\\u8981\\u8865\\u8BFE\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u4F46\\u662F\\u5982\\u679C\\u8FFD\\u6C42\\u5168\\u8986\\u76D6\\u7684\\u6D4B\\u8BD5\\u7387\\uFF0C\\u90A3\\u53CD\\u800C\\u66F4\\u662F\\u65E0\\u6CD5\\u5B9E\\u73B0\\u7684\\uFF0C\\u5BF9\\u8FDB\\u5EA6\\u65E0\\u76CA\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u6838\\u5FC3\\u548C\\u57FA\\u7840\\u6A21\\u5757\\u8FFD\\u6C42 100% \\u8986\\u76D6\\uFF0C\\u5176\\u4ED6\\u7684\\u4EC5\\u5BF9\\u590D\\u6742\\u903B\\u8F91\\u8FDB\\u884C\\u6D4B\\u8BD5\\uFF0C\\u81F3\\u4E8E\\u5269\\u4E0B\\u7684\\u53EA\\u5728\\u5173\\u952E\\u70B9\\u8FDB\\u884C\\u6CE8\\u91CA\\u3002\"))), mdx(\"h1\", null), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u6240\\u4EE5\\u6D4B\\u8BD5\\u5F88\\u6709\\u5FC5\\u8981\\uFF0C\\u4F46\\u662F\\u8981\\u6709\\u7684\\u653E\\u77E2\\uFF0C\\u6709\\u76EE\\u7684\\u7684\\u6295\\u5165\\u8D44\\u6E90\\uFF0C\\u5E73\\u8861\\u8FDB\\u5EA6\\u548C\\u5065\\u58EE\\u6027\\u7684\\u95EE\\u9898\\u3002\")), mdx(\"hr\", null), mdx(\"h3\", null, \"\\u76EE\\u7684\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u6D4B\\u8BD5\\u9A71\\u52A8\\u7F16\\u7A0B\\uFF0C\\u66F4\\u597D\\u7684\\u8003\\u8651\\u8FB9\\u754C\\u800C\\u4E0D\\u662F\\u5047\\u8BBE\\u6210\\u529F\\u7F16\\u7A0B\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u66F4\\u597D\\u7684\\u8868\\u8FF0\\u529F\\u80FD\\u76EE\\u7684\\u548C\\u9884\\u671F\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u591A\\u4EBA\\u534F\\u4F5C\\u7684\\u65F6\\u5019\\u66F4\\u597D\\u7684\\u9650\\u5236\\u884C\\u4E3A\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u907F\\u514D\\u56DE\\u5F52\\u6D4B\\u8BD5\\u5931\\u8D25\\uFF0C\\u540E\\u7EED\\u4FEE\\u6539\\u4E0D\\u81EA\\u77E5\\u7684\\u6D89\\u53CA\\u5DF2\\u6709\\u529F\\u80FD\")), mdx(\"h1\", null), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u65B0\\u529F\\u80FD\\u548C\\u4E1A\\u52A1\\u4E00\\u76F4\\u8FFD\\u7684\\u5F88\\u7D27\\uFF0C\\u4F46\\u662F\\u5BF9\\u4E8E\\u57FA\\u7840\\u548C\\u91CD\\u8981\\u6A21\\u5757\\uFF0C\\u9700\\u8981\\u6709\\u8DB3\\u591F\\u7684\\u65F6\\u95F4\\u5B8C\\u5584\\u6D4B\\u8BD5\\u3002\")), mdx(\"hr\", null), mdx(\"h3\", null, \"\\u6D4B\\u8BD5\\u76EE\\u6807\\u7684\\u4E00\\u822C\\u539F\\u5219\"), mdx(Split, {\n    mdxType: \"Split\"\n  }, mdx(\"div\", {\n    style: {\n      width: 600\n    }\n  }, mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u91CD\\u8981\\u6838\\u5FC3\\u529F\\u80FD\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u8DE8\\u9879\\u76EE\\u4F9D\\u8D56\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u57FA\\u7840\\u652F\\u6301\\u5E93\\u3001\\u5DE5\\u5177\\u5E93\\u6216\\u8005\\u7EC4\\u4EF6\")))), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u57FA\\u7840\\u7EC4\\u4EF6\\u5E93 \\u2705\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u8F85\\u52A9\\u51FD\\u6570\\u4E4B\\u7C7B\\u7684\\u57FA\\u7840\\u5E93 \\u2705\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u6838\\u5FC3\\u6570\\u636E\\u5C42 \\u2705\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u591A\\u9879\\u76EE\\u4F7F\\u7528\\u7684 App \\u5524\\u9192 \\u2705\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u591A\\u9879\\u76EE\\u4F7F\\u7528\\u7684\\u9519\\u8BEF\\u6536\\u96C6 \\u2705\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5C01\\u88C5\\u7684\\u5E94\\u7528\\u901A\\u4FE1\\u5C42 \\u2705\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u4E1A\\u52A1\\u754C\\u9762 \\u274C\\u2754\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u6D3B\\u52A8\\u754C\\u9762 \\u274C\\u2754\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56 \\u274C\"))), mdx(\"hr\", null), mdx(\"h3\", null, \"\\u89C4\\u8303\"), mdx(\"div\", {\n    style: {\n      textAlign: 'left',\n      width: '60vw'\n    }\n  }, mdx(\"p\", null, \"\\u6211\\u4EEC\\u5199\\u51FA\\u6765\\u7684\\u6BCF\\u4E00\\u4E2A\\u6A21\\u5757\\uFF0C\\u5C06\\u6765\\u90FD\\u662F\\u8981\\u4E0A\\u7EBF\\u7684\\uFF0C\\u662F\\u8981\\u7ECF\\u53D7\\u6D41\\u91CF\\u68C0\\u9A8C\\u7684\\uFF0C\\u5982\\u679C\\u4F60\\u5199\\u7684\\u8FD9\\u4E2A\\u903B\\u8F91\\u5728\\u7EBF\\u4E0A\\u9020\\u6210\\u4E86\\u5D29\\u6E83\\u3001\\u767D\\u5C4F\\u3001\\u6D41\\u7A0B\\u8D70\\u4E0D\\u901A\\uFF0C\\u662F\\u4F1A\\u5F71\\u54CD\\u4EA7\\u54C1\\u4F53\\u9A8C\\u3001\\u9020\\u6210\\u8D44\\u4EA7\\u635F\\u5931\\u3001\\u751A\\u81F3\\u5F62\\u8C61\\u516C\\u53F8\\u7684\\u5546\\u4E1A\\u8BA1\\u5212\\u3002\"), mdx(\"p\", null, \"\\u5B66\\u751F\\u65F6\\u4EE3 Demo \\u7EA7\\u522B\\u7684\\u7A0B\\u5E8F\\u548C\\u4E0A\\u7EBF\\u4EA7\\u54C1\\u7684\\u533A\\u522B\\u5F88\\u5927\\u7684\\u5730\\u65B9\\u5728\\u4E8E\\uFF1A\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u4F1A\\u6709\\u5F88\\u591A\\u4EBA\\u4F7F\\u7528\\uFF0C\\u4F60\\u9700\\u8981\\u4E3A\\u610F\\u5916\\u548C\\u95EE\\u9898\\u8D1F\\u8D23\"), \"\\uFF0C\\u4E0D\\u4EC5\\u4EC5\\u662F\\u4F60\\uFF0C\\u6211\\u4F5C\\u4E3A\\u8D1F\\u8D23\\u4EBA\\u4E5F\\u4E3A\\u4F60\\u6572\\u51FA\\u6765\\u7684\\u6BCF\\u4E2A\\u5B57\\u7B26\\u80CC\\u4E66\\u3002\"), mdx(\"p\", null, \"\\u6240\\u4EE5\\u5982\\u679C\\u4F60\\u7ECF\\u624B\\u7684\\u4EA7\\u54C1\\u5F88\\u91CD\\u8981\\uFF0C\\u4F46\\u662F\\u6CA1\\u6709\\u90A3\\u79CD\\u8001\\u9053\\u7684\\u7ECF\\u9A8C\\uFF0C\\u6CA1\\u80FD\\u529B\\u8003\\u8651\\u5468\\u5168\\uFF0C\\u8BF7\\u4E25\\u683C\\u6309\\u7167\\u89C4\\u8303\\u4FDD\\u8BC1\\u6D4B\\u8BD5\\u3002\"), mdx(\"small\", {\n    style: {\n      fontSize: '0.6em'\n    }\n  }, \"*: \\u6D4B\\u8BD5\\u89C4\\u8303\\u8BF7\\u5230\\u5185\\u7F51\\u4EE3\\u7801\\u5E73\\u53F0\\u67E5\\u770B\")), mdx(\"hr\", null), mdx(\"h3\", null, \"\\u524D\\u7AEF\\u6D4B\\u8BD5\\u6982\\u89C8\"), mdx(Split, {\n    mdxType: \"Split\"\n  }, mdx(\"div\", {\n    style: {\n      textAlign: 'left',\n      width: '40vw',\n      marginRight: '50px'\n    }\n  }, mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5355\\u5143\\u6D4B\\u8BD5\\uFF1A\\u4ECE\\u529F\\u80FD\\u51FD\\u6570\\u5230\\u6574\\u4E2A\\u6A21\\u5757\\u7684\\u6D4B\\u8BD5\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u529F\\u80FD\\u6D4B\\u8BD5 / e2e\\u6D4B\\u8BD5 / \\u7AEF\\u5230\\u7AEF\\u6D4B\\u8BD5 / \\u5192\\u70DF\\u6D4B\\u8BD5\\uFF1A\\u5B8C\\u6574\\u72EC\\u7ACB\\u529F\\u80FD\\u7684\\u6D4B\\u8BD5\\uFF0C\\u6BD4\\u5982\\u767B\\u9646\\u6CE8\\u518C\\u7684\\u6D41\\u7A0B\\uFF0C\\u53EF\\u80FD\\u9700\\u8981\\u6A21\\u62DF\\u7528\\u6237\\u4EA4\\u4E92\\uFF0C\\u76EE\\u7684\\u662F\\u5B8C\\u6574\\u6027\\u3002\"))), mdx(\"div\", {\n    style: {\n      textAlign: 'left',\n      width: '40vw'\n    }\n  }, mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u8FB9\\u754C\\u7684\\u9650\\u5B9A\\u3001\\u7EAF\\u51FD\\u6570\\u7684\\u8F93\\u5165\\u8F93\\u51FA\\u9650\\u5236\\u548C\\u89C4\\u8303\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u7AEF\\u5BF9\\u7AEF\\u7684\\u6D4B\\u8BD5\\u3001\\u9ED1\\u76D2\\u884C\\u4E3A\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u53EF\\u4EE5\\u63CF\\u8FF0\\u7684 UI \\u548C\\u884C\\u4E3A\")))), mdx(\"hr\", null), mdx(\"h3\", null, \"\\u5DE5\\u5177\"), mdx(\"div\", {\n    style: {\n      textAlign: 'left',\n      width: '60vw',\n      marginBottom: 20\n    }\n  }, mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Jest\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"React Testing Library\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Enzyme\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"PhantomJS\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Puppeteer\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"cypress\"))), mdx(\"p\", null, \"\\u6211\\u4EEC\\u76EE\\u524D\\u6BCF\\u4E2A\\u9879\\u76EE\\u4E25\\u683C\\u7A0B\\u5EA6\\u4E0D\\u540C\\uFF0C\\u4E0D\\u8FC7\\u57FA\\u672C\\u90FD\\u6709\\u5B9E\\u73B0\\u7684\\u5B9E\\u4F8B\\u548C\\u8FD0\\u884C\\u6587\\u6863\\u3002\"), mdx(\"hr\", null), mdx(\"h1\", null, \"Thank You\"), mdx(\"div\", {\n    style: {\n      fontSize: \".5em\"\n    }\n  }, \"/ ** \\u6280\\u672F\\u56E2\\u961F\\u5206\\u4EAB \\xB7 \\u524D\\u7AEF \\xB7 Ubug ** /\"));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"前端测试","date":"2020-11-15 18:16:01","description":null,"tech":null,"slug":"npm-run-test"},"fields":{"slug":"/slides/skills/npm-run-test","theme":"code","isSlide":true}}},{"node":{"id":"ab61d8eb-725c-5c4e-9bac-9019820270e4","body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nfunction Logo() {\n  return mdx(\"div\", {\n    style: {\n      position: \"absolute\",\n      left: \"10px\",\n      top: \"10px\",\n      display: \"flex\",\n      alignItems: \"center\"\n    }\n  }, mdx(\"svg\", {\n    width: \"40px\",\n    height: \"40px\",\n    viewBox: \"0 0 470 470\",\n    version: \"1.1\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, mdx(\"g\", {\n    stroke: \"none\",\n    strokeWidth: \"1\",\n    fill: \"none\",\n    fillRule: \"evenodd\"\n  }, mdx(\"g\", {\n    transform: \"translate(-21.000000, -27.000000)\"\n  }, mdx(\"g\", {\n    transform: \"translate(21.000000, 27.000000)\"\n  }, mdx(\"rect\", {\n    fill: \"#5E50E4\",\n    x: \"0\",\n    y: \"0\",\n    width: \"470\",\n    height: \"470\",\n    rx: \"84\"\n  }), mdx(\"g\", {\n    transform: \"translate(130.000000, 118.000000)\",\n    fill: \"#FFFFFF\",\n    fillRule: \"nonzero\",\n    id: \"\\u5F62\\u72B6\"\n  }, mdx(\"path\", {\n    d: \"M210,65.2777778 L173.11875,65.2777778 C167.2125,55.0944444 159.075,46.3472222 149.23125,39.6888889 L170.625,18.4083333 L152.11875,0 L123.6375,28.3305556 C117.6,26.8944444 111.43125,26.1111111 105,26.1111111 C98.56875,26.1111111 92.4,26.8944444 86.49375,28.3305556 L57.88125,0 L39.375,18.4083333 L60.6375,39.6888889 C50.925,46.3472222 42.7875,55.0944444 36.88125,65.2777778 L0,65.2777778 L0,91.3888889 L27.43125,91.3888889 C26.775,95.6972222 26.25,100.005556 26.25,104.444444 L26.25,117.5 L0,117.5 L0,143.611111 L26.25,143.611111 L26.25,156.666667 C26.25,161.105556 26.775,165.413889 27.43125,169.722222 L0,169.722222 L0,195.833333 L36.88125,195.833333 C50.53125,219.202778 75.8625,235 105,235 C134.1375,235 159.46875,219.202778 173.11875,195.833333 L210,195.833333 L210,169.722222 L182.56875,169.722222 C183.225,165.413889 183.75,161.105556 183.75,156.666667 L183.75,143.611111 L210,143.611111 L210,117.5 L183.75,117.5 L183.75,104.444444 C183.75,100.005556 183.225,95.6972222 182.56875,91.3888889 L210,91.3888889 L210,65.2777778 Z M157.5,117.5 L157.5,156.666667 C157.5,159.538889 157.10625,162.802778 156.58125,165.805556 L155.26875,174.291667 L150.4125,182.777778 C140.9625,198.966667 123.6375,208.888889 105,208.888889 C86.3625,208.888889 69.0375,198.836111 59.5875,182.777778 L54.73125,174.422222 L53.41875,165.936111 C52.89375,162.933333 52.5,159.669444 52.5,156.666667 L52.5,104.444444 C52.5,101.441667 52.89375,98.1777778 53.41875,95.3055556 L54.73125,86.8194444 L59.5875,78.3333333 C63.525,71.5444444 69.0375,65.6694444 75.46875,61.2305556 L82.95,56.1388889 L92.6625,53.7888889 C96.73125,52.7444444 100.93125,52.2222222 105,52.2222222 C109.2,52.2222222 113.26875,52.7444444 117.46875,53.7888889 L126.39375,55.8777778 L134.4,61.3611111 C140.9625,65.8 146.34375,71.5444444 150.28125,78.4638889 L155.26875,86.95 L156.58125,95.4361111 C157.10625,98.3083333 157.5,101.572222 157.5,104.444444 L157.5,117.5 Z M78.75,143.611111 L131.25,143.611111 L131.25,169.722222 L78.75,169.722222 L78.75,143.611111 Z M78.75,91.3888889 L131.25,91.3888889 L131.25,117.5 L78.75,117.5 L78.75,91.3888889 Z\"\n  })))))), mdx(\"div\", {\n    style: {\n      marginLeft: \"10px\",\n      fontSize: \"32px\",\n      fontWeight: \"normal\"\n    }\n  }, \"UBUG\"));\n}\nfunction CopyRight() {\n  return mdx(\"div\", {\n    style: {\n      position: \"absolute\",\n      left: \"10px\",\n      bottom: \"10px\",\n      display: \"flex\",\n      alignItems: \"center\"\n    }\n  }, mdx(\"div\", {\n    style: {\n      marginLeft: \"10px\",\n      fontSize: \"13px\",\n      fontWeight: \"normal\"\n    }\n  }, \"\\xA9 Ubug FE Team. All rights reserved.\"));\n}\nconst _frontmatter = {\n  \"slug\": \"data-flow\",\n  \"title\": \"用一段烂代码来说数据的流转\",\n  \"theme\": \"ms\",\n  \"date\": \"2020-10-15 10:36:21\",\n  \"published\": true\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  Logo,\n  CopyRight,\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(Logo, {\n    mdxType: \"Logo\"\n  }), mdx(\"div\", {\n    style: {\n      textAlign: \"left\"\n    }\n  }, mdx(\"div\", null, mdx(\"h1\", {\n    style: {\n      marginBottom: \"10px\"\n    }\n  }, \"Data Flow\"), mdx(\"div\", {\n    style: {\n      fontSize: \"1.5em\",\n      color: \"#55abed\",\n      margin: \"-10px 0 10px\"\n    }\n  }, \"\\u7528\\u4E00\\u6BB5\\u70C2\\u4EE3\\u7801\\u6765\\u8BF4\\u6570\\u636E\\u7684\\u6D41\\u8F6C\")), mdx(\"div\", {\n    style: {\n      margin: \"80px 0 0\"\n    }\n  }, mdx(\"div\", {\n    style: {\n      fontSize: \".7em\",\n      margin: \"10px 0\"\n    }\n  }, \"\\u6280\\u672F\\u56E2\\u961F\\u5206\\u4EAB\"), mdx(\"div\", {\n    style: {\n      fontSize: \".5em\",\n      margin: \"10px 0\"\n    }\n  }, \"\\u524D\\u7AEF\\u9879\\u76EE\\u7EC4 / Ubug\"))), mdx(CopyRight, {\n    mdxType: \"CopyRight\"\n  }), mdx(\"hr\", null), mdx(Logo, {\n    mdxType: \"Logo\"\n  }), mdx(\"h2\", null, \"\\u6570\\u636E\\u6D41\\u8F6C\\uFF1F\"), mdx(\"div\", {\n    style: {\n      textAlign: \"left\",\n      maxWidth: \"1000px\"\n    }\n  }, \"\\u6570\\u636E\\u7684\\u6D41\\u8F6C\\uFF1F\\u6570\\u636E\\u4E0D\\u662F\\u4ECE\\u540E\\u53F0\\u53D6\\u56DE\\u6765\\u5C55\\u793A\\u5728\\u754C\\u9762\\u4E0A\\u8FD9\\u4E2A\\u7B80\\u5355\\u7684\\u4E8B\\u60C5\\u5417\\uFF1F\"), mdx(\"hr\", null), mdx(Logo, {\n    mdxType: \"Logo\"\n  }), mdx(\"h2\", null, \"\\u73B0\\u4EE3\\u524D\\u7AEF\\u4E0B\\u7684\\u6570\\u636E\"), mdx(\"div\", {\n    style: {\n      textAlign: \"left\",\n      maxWidth: \"1000px\"\n    }\n  }, \"\\u73B0\\u4EE3\\u524D\\u7AEF\\u5DF2\\u7ECF\\u548C\\u540E\\u53F0\\u89E3\\u8026\\uFF0C\\u540E\\u53F0\\u63D0\\u4F9B Restful \\u6216 Restful-like \\u63A5\\u53E3\\uFF0C\\u6240\\u4EE5\\u524D\\u7AEF\\u9762\\u4E34\\u7684\\u5927\\u90E8\\u5206\\u90FD\\u4E0D\\u662F\\u9AD8\\u5EA6\\u5B9A\\u5236\\u7684\\u805A\\u5408\\u63A5\\u53E3\\u4E86\\u3002\"), mdx(\"div\", {\n    style: {\n      marginTop: \"50px\",\n      textAlign: \"left\",\n      maxWidth: \"1000px\"\n    }\n  }, \"\\u76EE\\u524D\\u524D\\u7AEF\\u4E0E\\u540E\\u7AEF\\u7684\\u4EA4\\u4E92\\u5927\\u90E8\\u5206\\u62FF\\u5230\\u6570\\u636E\\u9700\\u8981\\u81EA\\u5DF1\\u4ECE\\u4E2D\\u62C6\\u5206\\u51FA\\u81EA\\u5DF1\\u9700\\u8981\\u7684\\u90E8\\u5206\\uFF0C\\u8F6C\\u6210\\u6570\\u636E\\u6A21\\u578B\\u3001\\u89C6\\u56FE\\u72B6\\u6001\\u624D\\u80FD\\u663E\\u793A\\u7ED9\\u7528\\u6237\\u770B\\u3002\"), mdx(\"div\", {\n    style: {\n      marginTop: \"50px\",\n      textAlign: \"left\",\n      maxWidth: \"1000px\"\n    }\n  }, \"\\u6240\\u4EE5\\u5173\\u952E\\u662F\\u8FD9\\u4E2A\\u6570\\u636E\\u600E\\u4E48\\u6D41\\u8F6C\\uFF1F\"), mdx(\"hr\", null), mdx(Logo, {\n    mdxType: \"Logo\"\n  }), mdx(\"h2\", null, \"\\u5728\\u6570\\u636E\\u5904\\u7406\\u4E4B\\u524D\\uFF0C\\u601D\\u8003\\u4E0B\\u8FD9\\u51E0\\u4E2A\\u6982\\u5FF5\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u539F\\u751F\\u6570\\u636E\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u6570\\u636E\\u6A21\\u578B\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u7EC4\\u4EF6\\u72B6\\u6001\")), mdx(\"hr\", null), mdx(Logo, {\n    mdxType: \"Logo\"\n  }), mdx(\"h3\", null, \"1. \\u539F\\u751F\\u6570\\u636E\"), mdx(\"div\", {\n    style: {\n      marginBottom: \"50px\",\n      textAlign: \"left\",\n      maxWidth: \"1000px\"\n    }\n  }, \"\\u4ECE\\u540E\\u53F0\\u53D6\\u6765\\u7684 JSON \\u683C\\u5F0F\\u6570\\u636E\\uFF0C\\u53EF\\u80FD\\u662F\\u805A\\u5408\\u63A5\\u53E3\\u3001Restful\\u3001\\u6CA1\\u6709\\u903B\\u8F91\\u62C6\\u5206\\u3001\\u53EF\\u80FD\\u662F\\u5206\\u9875\\u7684\\u5217\\u8868\\u3001\\u4E5F\\u53EF\\u80FD\\u662F\\u9700\\u8981\\u68C0\\u67E5\\u6821\\u9A8C\\u7684\\u810F\\u6570\\u636E\\uFF0C\\u8FD9\\u4E2A\\u6570\\u636E\\u6709\\u7684\\u80FD\\u76F4\\u63A5\\u7528\\uFF0C\\u6709\\u7684\\u9700\\u8981\\u8FDB\\u884C\\u5904\\u7406\\u3002\"), mdx(\"h3\", null, \"2. \\u6570\\u636E\\u6A21\\u578B\"), mdx(\"div\", {\n    style: {\n      marginBottom: \"50px\",\n      textAlign: \"left\",\n      maxWidth: \"1000px\"\n    }\n  }, \"\\u539F\\u751F\\u6570\\u636E\\u7ECF\\u8FC7\\u5305\\u88C5\\u3001\\u6821\\u9A8C\\u3001\\u5904\\u7406\\u5F97\\u5230\\u4E00\\u4E2A\\u6570\\u636E\\u6A21\\u578B\\u3002\\u6709\\u7684\\u6570\\u636E\\u6A21\\u578B\\u5E26\\u6709\\u7279\\u522B\\u7684\\u65B9\\u6CD5\\u3001\\u4E8B\\u4EF6\\u673A\\u5236\\u3001\\u4E0D\\u53EF\\u53D8\\u7B49\\uFF0C\\u53EF\\u80FD\\u88AB\\u6574\\u4E2A\\u5E94\\u7528\\u5728\\u591A\\u5904\\u4F7F\\u7528\\u3002\\u66F4\\u591A\\u7684\\u662F\\u8868\\u8FBE\\u4E00\\u4E2A\\u5BF9\\u8C61\\u7684\\u6982\\u5FF5\\u3001\\u6216\\u8005\\u76F8\\u5173\\u6570\\u636E\\u7684\\u805A\\u5408\\uFF0C\\u4E0E\\u89C6\\u56FE\\u65E0\\u5173\\u3002\"), mdx(\"h3\", null, \"3. \\u7EC4\\u4EF6\\u72B6\\u6001\"), mdx(\"div\", {\n    style: {\n      marginBottom: \"50px\",\n      textAlign: \"left\",\n      maxWidth: \"1000px\"\n    }\n  }, \"`state` \\u6216\\u8005 `props` \\u4E4B\\u7C7B\\u7684\\u6982\\u5FF5\\uFF0C\\u4E0E\\u89C6\\u56FE\\u7EC4\\u4EF6\\u7ED1\\u5B9A\\u7684\\u6570\\u636E\\u6A21\\u578B\\uFF0C\\u4E0E\\u89C6\\u56FE\\u5F3A\\u76F8\\u5173\\u3002\"), mdx(\"hr\", null), mdx(Logo, {\n    mdxType: \"Logo\"\n  }), mdx(\"h2\", null, \"\\u63D2\\u4E00\\u5634\"), mdx(\"div\", {\n    style: {\n      marginBottom: \"50px\",\n      textAlign: \"left\",\n      maxWidth: \"1000px\"\n    }\n  }, \"1. VUE \\u7684\\u7ED9\\u4EBA\\u7684\\u611F\\u89C9\\u662F\\u201C\\u6A21\\u677F\\u89C6\\u56FE\\u201D\\uFF1A\\u6240\\u4EE5\\u7EC4\\u4EF6\\u72B6\\u6001\\u662F\\u653E\\u5230 state\\u3001computed \\u91CC\\u9762\\uFF0C\\u6F5C\\u5728\\u7684\\u5FC3\\u667A\\u662F\\u201C\\u5148\\u628A\\u6570\\u636E\\u51C6\\u5907\\u597D\\uFF0C\\u6309\\u7167\\u6A21\\u578B\\u8BED\\u6CD5\\u642D\\u5EFA\\u89C6\\u56FE\\u201D\"), mdx(\"div\", {\n    style: {\n      marginBottom: \"50px\",\n      textAlign: \"left\",\n      maxWidth: \"1000px\"\n    }\n  }, \"2. React \\u7684\\u7ED9\\u4EBA\\u7684\\u611F\\u89C9\\u662F\\u201C\\u51FD\\u6570\\u89C6\\u56FE\\u201D\\uFF1A\\u6240\\u4EE5\\u7EC4\\u4EF6\\u72B6\\u6001\\u6709 state \\u548C props\\uFF0C\\u8BA1\\u7B97\\u53EF\\u4EE5\\u653E\\u5230 render \\u51FD\\u6570\\u91CC\\u9762\\uFF0C\\u6F5C\\u5728\\u7684\\u5FC3\\u667A\\u662F\\u201C\\u5173\\u952E\\u6570\\u636E\\u53D8\\u52A8\\uFF0C\\u80FD\\u591F\\u8BA1\\u7B97\\u7684\\u53EF\\u4EE5\\u653E\\u5230\\u51FD\\u6570\\u91CC\\u201D\"), mdx(\"hr\", null), mdx(Logo, {\n    mdxType: \"Logo\"\n  }), mdx(\"h2\", null, \"\\u6700\\u8FD1\\u770B\\u5230\\u5F88\\u591A\\u4EBA\\u51FA\\u73B0\\u7684\\u4E00\\u4E9B\\u95EE\\u9898\\uFF0C\\u672C\\u8D28\\u4E0A\\u662F\\u4E0D\\u7406\\u89E3\\u6570\\u636E\\u6240\\u8868\\u8FBE\\u7684\\u542B\\u4E49\"), mdx(\"p\", null, \"\\u7B80\\u5316\\u7684\\u4F8B\\u5B50\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"const data = await getActivityInviteUsers()\\nfor (let i = 0; i < data.invitedUsers.length; i++) {\\n    const user = data.invitedUsers[i]\\n    user.statusText = user.isFriend === 1 ? '\\u5DF2\\u7ECF\\u6210\\u4E3A\\u670B\\u53CB' : '\\u6DFB\\u52A0\\u597D\\u53CB'\\n}\\nfor (let i = 0; i < data.waitingUsers.length; i++) {\\n    const user = data.waitingUsers[i]\\n    user.statusText = user.money === 0 ? '\\u5DF2\\u7ECF\\u9886\\u53D6' : '\\u7B49\\u5F85\\u53D1\\u653E'\\n}\\nconst users = data.invitedUsers.concat(data.waitingUsers)\\ndata.waitingUsers.length = 0\\nfor (let i = 0; i < data.invitedUsers.length; i++) {\\n    const user = data.invitedUsers[i]\\n    user.statusText = user.status === 0 ? '\\u7B49\\u5F85\\u4E0B\\u5355' : '\\u9080\\u8BF7\\u6210\\u529F'\\n}\\nnew Vue({\\n    data: {users},\\n    template: '<div v-for=\\\"user in users\\\">{{user.name}}: {{ user.statusText }}</div>'\\n})\\n\")), mdx(\"p\", null, \"\\u274C works but bad\"), mdx(\"hr\", null), mdx(Logo, {\n    mdxType: \"Logo\"\n  }), mdx(\"h2\", null, \"\\u4E0A\\u9875\\u7684\\u4EE3\\u7801\\u6709\\u5F88\\u591A\\u95EE\\u9898\\uFF0C\\u5173\\u952E\\u7684\\u95EE\\u9898\\u6709\\uFF1A\"), mdx(\"div\", {\n    style: {\n      marginBottom: \"50px\",\n      textAlign: \"left\",\n      width: \"800px\"\n    }\n  }, \"1. \\u6570\\u636E\\u7528\\u5BF9\\u8C61\\u5F15\\u7528\\u76F4\\u63A5\\u539F\\u5730\\u4FEE\\u6539\\u3002\\u83AB\\u540D\\u5176\\u5999\\u7684\\u64CD\\u4F5C\\uFF01\"), mdx(\"div\", {\n    style: {\n      marginBottom: \"50px\",\n      textAlign: \"left\",\n      width: \"800px\"\n    }\n  }, \"2. \\u89C6\\u56FE\\u6570\\u636E\\u3001\\u6570\\u636E\\u6A21\\u578B\\u3001\\u6570\\u636E\\u6821\\u9A8C\\u90FD\\u5F88\\u5947\\u602A\\uFF01\\uFF01\"), mdx(\"div\", {\n    style: {\n      marginBottom: \"50px\",\n      textAlign: \"left\",\n      width: \"800px\"\n    }\n  }, \"3. \\u6570\\u7EC4\\u64CD\\u4F5C\\u66F4\\u662F\\u4E71\\u4E03\\u516B\\u7CDF\\uFF01\\uFF01\\uFF01\"), mdx(\"div\", {\n    style: {\n      marginBottom: \"50px\",\n      textAlign: \"left\",\n      width: \"800px\"\n    }\n  }, \"4. \\u4E00\\u70B9\\u903B\\u8F91\\u6CA1\\u6709\\uFF01\\uFF01\\uFF01\\uFF01\\uFF01\"), mdx(\"p\", null, \"\\u600E\\u4E48\\u4EA7\\u751F\\u7684\\u8FD9\\u6BB5\\u4EE3\\u7801\\uFF1F\\u5F53\\u4E8B\\u4EBA\\u8BF4\\u662F\\u9700\\u6C42\\u591A\\u6B21\\u53D8\\u66F4\\u5BFC\\u81F4\\u903B\\u8F91\\u4E0D\\u505C\\u53E0\\u52A0\\u3002\\u2753\\u2753\\u2753\"), mdx(\"hr\", null), mdx(Logo, {\n    mdxType: \"Logo\"\n  }), mdx(\"h2\", null, \"\\u6B63\\u786E\\u7684\\u64CD\\u4F5C\"), mdx(\"div\", {\n    style: {\n      marginBottom: \"50px\",\n      textAlign: \"left\",\n      width: \"800px\"\n    }\n  }, \"1. \\u533A\\u5206\\u6570\\u636E\\u6A21\\u578B\\u548C\\u89C6\\u56FE\\u72B6\\u6001\"), mdx(\"div\", {\n    style: {\n      marginBottom: \"50px\",\n      textAlign: \"left\",\n      width: \"800px\"\n    }\n  }, \"2. \\u6BCF\\u4E2A\\u6A21\\u578B\\u7684\\u6784\\u5EFA\\u90FD\\u662F\\u6309\\u9700\\u201C\\u53D6\\u201D\\u7528\\uFF0C\\u8BED\\u4E49\\u660E\\u786E\\u53EF\\u63A8\\u65AD\\uFF0C\\u800C\\u4E0D\\u662F\\u201C\\u62FC\\u201D\\u6570\\u636E\\uFF0C\\u8C03\\u51FA\\u6765\\u6570\\u636E\"), mdx(\"div\", {\n    style: {\n      marginBottom: \"50px\",\n      textAlign: \"left\",\n      width: \"800px\"\n    }\n  }, \"3. \\u6570\\u7EC4\\u6709\\u5F88\\u591A\\u7684\\u8F85\\u52A9\\u65B9\\u6CD5\\uFF0C\\u77E5\\u9053\\u6BCF\\u4E2A\\u65B9\\u6CD5\\u548C\\u526F\\u4F5C\\u7528\"), mdx(\"div\", {\n    style: {\n      marginBottom: \"50px\",\n      textAlign: \"left\",\n      width: \"800px\"\n    }\n  }, \"4. \\u5199\\u4EE3\\u7801\\u4E4B\\u524D\\u5148\\u5199\\u903B\\u8F91\\uFF0C\\u6539\\u4EE3\\u7801\\u4E4B\\u524D\\u5148\\u6539\\u903B\\u8F91\\uFF0C\\u50BB\\u74DC\\u6CE8\\u91CA\\u5728\\u5173\\u952E\\u5730\\u65B9\\u4E5F\\u4E0D\\u80FD\\u7701\"), mdx(\"hr\", null), mdx(Logo, {\n    mdxType: \"Logo\"\n  }), mdx(\"h2\", null, \"\\u6539\\u6CD5\"), mdx(\"p\", null, \"\\u7B80\\u5316\\u7684\\u4F8B\\u5B50\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"const data = await getActivityInviteUsers()\\n\\n// \\u6587\\u6863\\u786E\\u8BA4\\u8FD9\\u4E24\\u4E2A\\u6570\\u636E\\u7ED3\\u6784\\u76F8\\u540C (\\u6790\\u6784\\u64CD\\u4F5C\\u907F\\u514D\\u5F15\\u7528\\u5230\\u539F\\u53D8\\u91CF)\\nconst users = [...data.invitedUsers, ...data.waitingUsers]\\n\\n// \\u5982\\u679C\\u9700\\u8981\\u6570\\u636E\\u6A21\\u578B\\uFF0C\\u6BD4\\u5982\\u6709\\u540E\\u7EED\\u64CD\\u4F5C\\u9700\\u6C42\\u7684\\u60C5\\u51B5\\nclass UserInvitedModel {\\n    users\\n    constructor(users){\\n        this.users.map(/.../)\\n    }\\n    add(){/*...*/}\\n}\\nconst model = new UserInvitedModel(users)\\n\\n// \\u7528 map \\u4EA7\\u751F\\u65B0\\u7684\\u6570\\u7EC4\\u4F5C\\u4E3A\\u72B6\\u6001\\u89C6\\u56FE\\uFF0C\\u800C\\u4E0D\\u662F\\u539F\\u5730\\u4FEE\\u6539\\uFF0C\\u53EA\\u53D6\\u9700\\u8981\\u7684\\u907F\\u514D\\u8DDF\\u8E2A\\u592A\\u591A\\u5BF9\\u8C61\\nconst invitedUsersState = model.users.sort(timeCompare).map(user => {\\n    const { name, status, isFriend, money } = user\\n    return { name, status, isFriend, money }\\n})\\n\\n// \\u6570\\u636E\\u662F\\u6570\\u636E\\u3001\\u72B6\\u6001\\u662F\\u72B6\\u6001\\u3001\\u89C6\\u56FE\\u662F\\u89C6\\u56FE\\nnew Vue({\\n    data: {invitedUsersState},\\n    template: `<div v-for=\\\"user in invitedUsers\\\">{{user.name}}: {{ user.status === 0 ? '\\u7B49\\u5F85\\u4E0B\\u5355' : '\\u9080\\u8BF7\\u6210\\u529F' }}</div>`\\n})\\n\")), mdx(\"p\", null, \"\\u2705 works like a charm\"), mdx(\"hr\", null), mdx(Logo, {\n    mdxType: \"Logo\"\n  }), mdx(\"h3\", null, \"\\u6570\\u636E\\u662F\\u6570\\u636E\\u3001\\u72B6\\u6001\\u662F\\u72B6\\u6001\\u3001\\u89C6\\u56FE\\u662F\\u89C6\\u56FE\"), mdx(\"p\", null, \"\\u8DB3\\u591F\\u6E05\\u6670\\u7684\\u903B\\u8F91\\uFF0C\\u4EE3\\u7801\\u4F1A\\u66F4\\u5BB9\\u6613\\u8BFB\\uFF0C\\u66F4\\u4E0D\\u5BB9\\u6613\\u51FA\\u9519\"), mdx(\"hr\", null), mdx(Logo, {\n    mdxType: \"Logo\"\n  }), mdx(\"h1\", null, \"Thank You\"), mdx(\"div\", {\n    style: {\n      fontSize: \".5em\"\n    }\n  }, \"/ ** \\u6280\\u672F\\u56E2\\u961F\\u5206\\u4EAB \\xB7 \\u524D\\u7AEF \\xB7 Ubug ** /\"), mdx(CopyRight, {\n    mdxType: \"CopyRight\"\n  }));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"用一段烂代码来说数据的流转","date":"2020-10-15 10:36:21","description":null,"tech":null,"slug":"data-flow"},"fields":{"slug":"/slides/work/data-flow","theme":"ms","isSlide":true}}},{"node":{"id":"b71efbdb-4c0f-5457-9b27-5d9eb7ac1c74","body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst Cube = React.memo(({\n  color = '#fff',\n  size = 100\n}) => {\n  const childStyle = {\n    position: 'absolute',\n    left: 0,\n    right: 0,\n    width: '100%',\n    height: '100%',\n    overflow: 'hidden'\n  };\n  const [pos, setPos] = React.useState([0, 0]);\n  const mainRef = React.useRef(null);\n  React.useEffect(() => {\n    const mousemoveHandler = ev => {\n      if (mainRef.current) {\n        const rect = mainRef.current.getBoundingClientRect();\n        setPos([ev.x - rect.left, ev.y - rect.top]);\n      }\n    };\n    window.addEventListener('mousemove', mousemoveHandler, false);\n    return () => {\n      window.removeEventListener('mousemove', mousemoveHandler);\n    };\n  }, []);\n  return mdx(\"div\", {\n    style: {\n      position: 'fixed',\n      pointerEvent: 'none',\n      width: '100%',\n      height: '100%'\n    },\n    ref: mainRef\n  }, mdx(\"div\", {\n    style: childStyle\n  }, mdx(\"div\", {\n    style: {\n      position: 'absolute',\n      background: color,\n      width: size,\n      height: size,\n      transform: \"translate(-50%, -50%)\",\n      left: pos[0],\n      top: pos[1]\n    }\n  })));\n});\nconst Cube2 = React.memo(({\n  color = '#fff',\n  size = 10\n}) => {\n  const childStyle = {\n    position: 'absolute',\n    left: 0,\n    right: 0,\n    width: '100%',\n    height: '100%',\n    overflow: 'hidden'\n  };\n  const mainRef = React.useRef(null);\n  const cubeRef = React.useRef(null);\n  React.useEffect(() => {\n    const mousemoveHandler = ev => {\n      if (mainRef.current && cubeRef.current) {\n        const rect = mainRef.current.getBoundingClientRect();\n        cubeRef.current.style.transform = \"translate(\".concat(ev.x - rect.left, \"px, \").concat(ev.y - rect.top, \"px)\");\n      }\n    };\n    window.addEventListener('mousemove', mousemoveHandler, false);\n    return () => {\n      window.removeEventListener('mousemove', mousemoveHandler);\n    };\n  }, []);\n  return mdx(\"div\", {\n    style: {\n      position: 'fixed',\n      cursor: 'none',\n      pointerEvent: 'none',\n      width: '100%',\n      height: '100%'\n    },\n    ref: mainRef\n  }, mdx(\"div\", {\n    style: childStyle\n  }, mdx(\"div\", {\n    ref: cubeRef,\n    style: {\n      position: 'absolute',\n      background: color,\n      width: size,\n      height: size,\n      left: 0,\n      top: 0\n    }\n  })));\n});\nconst _frontmatter = {\n  \"slug\": \"react-performance\",\n  \"title\": \"React 性能优化案例 - 1\",\n  \"theme\": \"hack\",\n  \"date\": \"2020-09-05 09:36:21\",\n  \"published\": true\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  Cube,\n  Cube2,\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"React Performance\"), mdx(\"h3\", null, \"React \\u6027\\u80FD\\u4F18\\u5316\\u6848\\u4F8B\\u5206\\u6790 - 1\"), mdx(\"div\", {\n    style: {\n      fontSize: \".9em\"\n    }\n  }, \"/ ** \\u6280\\u672F\\u56E2\\u961F\\u5206\\u4EAB \\xB7 \\u524D\\u7AEF \\xB7 Ubug ** /\"), mdx(\"hr\", null), mdx(\"h2\", null, \"\\u80CC\\u666F\"), mdx(\"div\", {\n    style: {\n      textAlign: \"left\",\n      maxWidth: \"1000px\"\n    }\n  }, mdx(\"p\", null, \"\\u76EE\\u524D\\u4EA7\\u54C1\\u4E2D\\u6280\\u672F\\u6808\\u5927\\u90E8\\u5206\\u662F React\\uFF0C\\u5927\\u90E8\\u5206\\u6CA1\\u6709\\u9047\\u5230\\u660E\\u663E\\u7684\\u6027\\u80FD\\u95EE\\u9898\\uFF0C\\u4F46\\u662F\\u90E8\\u5206\\u4EA4\\u4E92\\u590D\\u6742\\u7684\\u9875\\u9762\\u5076\\u73B0\\u6709\\u6027\\u80FD\\u5361\\u987F\\u7684\\u95EE\\u9898\\u3002\"), mdx(\"p\", null, \"\\u5927\\u90E8\\u5206\\u65F6\\u5019\\u90FD\\u53EF\\u4EE5\\u770B\\u5230\\u660E\\u663E\\u7684\\u6027\\u80FD\\u95EE\\u9898\\uFF0C\\u4F46\\u662F\\u6709\\u65F6\\u5019\\u4E00\\u4E9B\"), mdx(\"p\", null, \"\\u4ECA\\u5929\\u5206\\u4EAB\\u4E00\\u4E2A\\u6700\\u5E38\\u89C1\\u7684\\u6027\\u80FD\\u6848\\u4F8B\\u5206\\u6790\\uFF0C\\u5E0C\\u671B\\u5927\\u5BB6\\u80FD\\u591F\\u518D\\u65E5\\u5E38\\u7F16\\u7A0B\\u4E2D\\u7559\\u610F\\u5E76\\u89E3\\u51B3\\u3002\")), mdx(\"hr\", null), mdx(\"h2\", null, \"\\u4F8B\\u5B50\"), mdx(\"p\", null, \"\\u8DDF\\u968F\\u9F20\\u6807\\u79FB\\u52A8\\u7684\\u65B9\\u5757\"), mdx(\"hr\", null), mdx(\"h3\", null, \"\\u4EE3\\u7801\"), mdx(\"p\", {\n    style: {\n      fontSize: '.5em',\n      margin: 0\n    }\n  }, \"\\u5FFD\\u7565\\u89C4\\u8303\\u95EE\\u9898\\u7684\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"export const RevealHighlight = ({ size = 100 }) => {\\n  const [pos, setPos] = React.useState([0, 0])\\n  const mainRef = React.useRef(null)\\n\\n  React.useEffect(() => {\\n    window.addEventListener('mousemove', (ev) => {\\n        const rect = mainRef.current.getBoundingClientRect()\\n        setPos([ev.x - rect.left, ev.y - rect.top])\\n    }, false)\\n  }, [])\\n\\n  return (\\n    <div ref={mainRef}>\\n      <div style={{ width: size, left: pos[0], top: pos[1]}}></div>\\n    </div>\\n  )\\n}\\n\")), mdx(Cube, {\n    mdxType: \"Cube\"\n  }), mdx(\"hr\", null), mdx(\"h2\", null, \"\\u201C\\u65E0\\u610F\\u4E49\\u7684\\u8BA1\\u7B97\\u548C\\u6E32\\u67D3\\u201D\"), mdx(\"hr\", null), mdx(\"h3\", null, \"\\u9010\\u884C\\u68C0\\u67E5\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"export const RevealHighlight = ({ size = 100 }) => { // memo \\u7F13\\u5B58\\u7EC4\\u4EF6\\n  const [pos, setPos] = React.useState([0, 0])             // state \\u66F4\\u65B0 = \\u91CD\\u6E32\\u67D3\\n  const r = React.useRef(null)\\n\\n  React.useEffect(() => {\\n    window.addEventListener('mousemove', (ev) => {   // \\u9F20\\u6807\\u8DDF\\u968F\\uFF0C\\u6CA1\\u529E\\u6CD5\\u7528\\u8282\\u6D41\\n      const rect = r.current.getBoundingClientRect() // \\u539F\\u751F API\\uFF0C\\u4ECD\\u662F\\u8017\\u65F6\\u64CD\\u4F5C\\n      setPos([ev.x - rect.left, ev.y - rect.top])    // \\u8BA1\\u7B97\\u8017\\u65F6\\n    }, false)\\n  }, [])\\n\\n  return (\\n    <div ref={r}>                       <!-- css \\u5C5E\\u6027\\u5B9A\\u4F4D\\u6539\\u53D8\\u4F1A\\u89E6\\u53D1\\u9875\\u9762\\u91CD\\u7ED8 -->\\n      <div style={{ width: size, left: pos[0], top: pos[1]}}></div>\\n    </div>\\n  )\\n}\\n\")), mdx(\"hr\", null), mdx(\"h3\", null, \"\\u6539\\u8FDB\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"export const RevealHighlight = React.memo(({ size = 100 }) => { // size \\u53D8\\u52A8\\u624D\\u4F1A\\u91CD\\u6E32\\u67D3\\n  const r = React.useRef(null)\\n  const r2 = React.useRef(null)   // \\u4E0D\\u4F7F\\u7528 state\\n\\n  React.useEffect(() => {\\n    window.addEventListener('mousemove', (ev) => {\\n      const rect = r.current.getBoundingClientRect()\\n      r2.current.style.transform = `translate(${ev.x - rect.left}px, ${ev.y - rect.top})`\\n    }, false)\\n    // dispose\\n  }, [])\\n\\n  return (\\n    <div ref={r}><div ref={r2} style={{ width: size}}></div></div>\\n  )\\n})\\n\")), mdx(Cube2, {\n    mdxType: \"Cube2\"\n  }), mdx(\"hr\", null), mdx(\"h2\", null, \"\\u201C\\u65E0\\u610F\\u4E49 / \\u4E0D\\u5FC5\\u8981 / \\u53EF\\u4F18\\u5316 \\u7684\\u8BA1\\u7B97\\u548C\\u6E32\\u67D3\\u201D\"), mdx(\"p\", null, \"\\u5206\\u6790\\u51FA\\u54EA\\u4E9B\\u72B6\\u6001\\u548C\\u526F\\u4F5C\\u7528\\u4F1A\\u5F71\\u54CD\\u91CD\\u7ED8\\uFF0C\\u628A\\u65E0\\u610F\\u4E49\\u7684\\u8BA1\\u7B97\\u548C\\u6E32\\u67D3\\u4F18\\u5316\\u6389\"), mdx(\"hr\", null), mdx(\"h1\", null, \"Thank You\"), mdx(\"div\", {\n    style: {\n      fontSize: \".5em\"\n    }\n  }, \"/ ** \\u6280\\u672F\\u56E2\\u961F\\u5206\\u4EAB \\xB7 \\u524D\\u7AEF \\xB7 Ubug ** /\"));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"React 性能优化案例 - 1","date":"2020-09-05 09:36:21","description":null,"tech":null,"slug":"react-performance"},"fields":{"slug":"/slides/work/react-performance","theme":"hack","isSlide":true}}},{"node":{"id":"e1bf8261-d367-5fde-ad3d-fc5cd9064a01","body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nfunction Logo() {\n  return mdx(\"div\", {\n    style: {\n      position: \"absolute\",\n      left: \"10px\",\n      top: \"10px\",\n      display: \"flex\",\n      alignItems: \"center\"\n    }\n  }, mdx(\"svg\", {\n    width: \"40px\",\n    height: \"40px\",\n    viewBox: \"0 0 470 470\",\n    version: \"1.1\",\n    xmlns: \"http://www.w3.org/2000/svg\"\n  }, mdx(\"g\", {\n    stroke: \"none\",\n    strokeWidth: \"1\",\n    fill: \"none\",\n    fillRule: \"evenodd\"\n  }, mdx(\"g\", {\n    transform: \"translate(-21.000000, -27.000000)\"\n  }, mdx(\"g\", {\n    transform: \"translate(21.000000, 27.000000)\"\n  }, mdx(\"rect\", {\n    fill: \"#5E50E4\",\n    x: \"0\",\n    y: \"0\",\n    width: \"470\",\n    height: \"470\",\n    rx: \"84\"\n  }), mdx(\"g\", {\n    transform: \"translate(130.000000, 118.000000)\",\n    fill: \"#FFFFFF\",\n    fillRule: \"nonzero\",\n    id: \"\\u5F62\\u72B6\"\n  }, mdx(\"path\", {\n    d: \"M210,65.2777778 L173.11875,65.2777778 C167.2125,55.0944444 159.075,46.3472222 149.23125,39.6888889 L170.625,18.4083333 L152.11875,0 L123.6375,28.3305556 C117.6,26.8944444 111.43125,26.1111111 105,26.1111111 C98.56875,26.1111111 92.4,26.8944444 86.49375,28.3305556 L57.88125,0 L39.375,18.4083333 L60.6375,39.6888889 C50.925,46.3472222 42.7875,55.0944444 36.88125,65.2777778 L0,65.2777778 L0,91.3888889 L27.43125,91.3888889 C26.775,95.6972222 26.25,100.005556 26.25,104.444444 L26.25,117.5 L0,117.5 L0,143.611111 L26.25,143.611111 L26.25,156.666667 C26.25,161.105556 26.775,165.413889 27.43125,169.722222 L0,169.722222 L0,195.833333 L36.88125,195.833333 C50.53125,219.202778 75.8625,235 105,235 C134.1375,235 159.46875,219.202778 173.11875,195.833333 L210,195.833333 L210,169.722222 L182.56875,169.722222 C183.225,165.413889 183.75,161.105556 183.75,156.666667 L183.75,143.611111 L210,143.611111 L210,117.5 L183.75,117.5 L183.75,104.444444 C183.75,100.005556 183.225,95.6972222 182.56875,91.3888889 L210,91.3888889 L210,65.2777778 Z M157.5,117.5 L157.5,156.666667 C157.5,159.538889 157.10625,162.802778 156.58125,165.805556 L155.26875,174.291667 L150.4125,182.777778 C140.9625,198.966667 123.6375,208.888889 105,208.888889 C86.3625,208.888889 69.0375,198.836111 59.5875,182.777778 L54.73125,174.422222 L53.41875,165.936111 C52.89375,162.933333 52.5,159.669444 52.5,156.666667 L52.5,104.444444 C52.5,101.441667 52.89375,98.1777778 53.41875,95.3055556 L54.73125,86.8194444 L59.5875,78.3333333 C63.525,71.5444444 69.0375,65.6694444 75.46875,61.2305556 L82.95,56.1388889 L92.6625,53.7888889 C96.73125,52.7444444 100.93125,52.2222222 105,52.2222222 C109.2,52.2222222 113.26875,52.7444444 117.46875,53.7888889 L126.39375,55.8777778 L134.4,61.3611111 C140.9625,65.8 146.34375,71.5444444 150.28125,78.4638889 L155.26875,86.95 L156.58125,95.4361111 C157.10625,98.3083333 157.5,101.572222 157.5,104.444444 L157.5,117.5 Z M78.75,143.611111 L131.25,143.611111 L131.25,169.722222 L78.75,169.722222 L78.75,143.611111 Z M78.75,91.3888889 L131.25,91.3888889 L131.25,117.5 L78.75,117.5 L78.75,91.3888889 Z\"\n  })))))), mdx(\"div\", {\n    style: {\n      marginLeft: \"10px\",\n      fontSize: \"32px\",\n      fontWeight: \"normal\"\n    }\n  }, \"UBUG\"));\n}\nfunction CopyRight() {\n  return mdx(\"div\", {\n    style: {\n      position: \"absolute\",\n      left: \"10px\",\n      bottom: \"10px\",\n      display: \"flex\",\n      alignItems: \"center\"\n    }\n  }, mdx(\"div\", {\n    style: {\n      marginLeft: \"10px\",\n      fontSize: \"13px\",\n      fontWeight: \"normal\"\n    }\n  }, \"\\xA9 Ubug FE Team. All rights reserved.\"));\n}\nconst _frontmatter = {\n  \"slug\": \"h5-activity\",\n  \"title\": \"活动页 H5 项目平台\",\n  \"theme\": \"ms\",\n  \"date\": \"2020-08-25 11:36:21\",\n  \"published\": true\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  Logo,\n  CopyRight,\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(Logo, {\n    mdxType: \"Logo\"\n  }), mdx(\"div\", {\n    style: {\n      textAlign: \"left\"\n    }\n  }, mdx(\"div\", null, mdx(\"h1\", {\n    style: {\n      marginBottom: \"10px\"\n    }\n  }, \"H5 Activity Platform\"), mdx(\"div\", {\n    style: {\n      fontSize: \"1em\",\n      color: \"#55abed\",\n      margin: \"-10px 0 10px\"\n    }\n  }, \"\\u6D3B\\u52A8\\u9875 H5 \\u9879\\u76EE\\u5E73\\u53F0\")), mdx(\"div\", {\n    style: {\n      margin: \"80px 0 0\"\n    }\n  }, mdx(\"div\", {\n    style: {\n      margin: \"10px 0\"\n    }\n  }, \"\\u6280\\u672F\\u56E2\\u961F\\u5206\\u4EAB\"), mdx(\"div\", {\n    style: {\n      fontSize: \".6em\",\n      margin: \"10px 0\"\n    }\n  }, \"\\u524D\\u7AEF\\u9879\\u76EE\\u7EC4 / Ubug\"))), mdx(CopyRight, {\n    mdxType: \"CopyRight\"\n  }), mdx(\"hr\", null), mdx(Logo, {\n    mdxType: \"Logo\"\n  }), mdx(\"h2\", null, \"\\u5E73\\u53F0\\u642D\\u5EFA\\u7684\\u80CC\\u666F\"), mdx(\"div\", {\n    style: {\n      textAlign: \"left\",\n      maxWidth: \"1000px\"\n    }\n  }, \"\\xA0\\xA0\\xA0\\xA0\\u5E94\\u7528\\u524D\\u671F\\u5F00\\u53D1\\u5B8C\\u6BD5\\u4E4B\\u540E\\uFF0C\\u4E1A\\u52A1\\u91CD\\u5FC3\\u8F6C\\u5230\\u4E86\\u63A8\\u5E7F\\u548C\\u8FD0\\u8425\\u9636\\u6BB5\\u3002\\u62C9\\u65B0\\u6D3B\\u52A8\\u3001\\u6D3B\\u8DC3\\u6D3B\\u52A8\\u3001\\u5730\\u63A8\\u3001\\u7559\\u5B58\\u7B49\\u90FD\\u9700\\u8981\\u7EC4\\u7EC7\\u6D3B\\u52A8\\uFF0C\\u8FD9\\u4E2A\\u6D3B\\u52A8\\u4E0D\\u53EF\\u80FD\\u4E00\\u6B21\\u7ED3\\u675F\\uFF0C\\u4E5F\\u4E0D\\u53EF\\u80FD\\u6BCF\\u6B21\\u90FD\\u91CD\\u5934\\u5F00\\u53D1\\uFF0C\\u6240\\u4EE5\\u5728\\u524D\\u51E0\\u671F\\u7684\\u6D3B\\u52A8\\u4E4B\\u540E\\uFF0C\\u76F8\\u5173\\u6D41\\u7A0B\\u3001\\u8D44\\u6E90\\u3001\\u9700\\u6C42\\u7B49\\u9700\\u8981\\u68B3\\u7406\\u63D0\\u6548\\uFF0C\\u6574\\u4E2A\\u6D3B\\u52A8\\u90E8\\u5206\\u4ECE\\u6D3B\\u52A8\\u7B56\\u5212\\u3001\\u9875\\u9762\\u8BBE\\u8BA1\\u3001H5\\u9875\\u9762\\u3001\\u540E\\u53F0\\u6570\\u636E\\u3001\\u5BA2\\u6237\\u7AEF\\u914D\\u5408\\u7B49\\u90FD\\u9700\\u8981\\u4E00\\u4E2A\\u5E73\\u53F0\\u6765\\u63D0\\u9AD8\\u7CFB\\u7EDF\\u6548\\u7387\\u548C\\u5065\\u58EE\\u6027\\u3002\"), mdx(\"hr\", null), mdx(Logo, {\n    mdxType: \"Logo\"\n  }), mdx(\"h2\", null, \"\\u5E73\\u53F0\\u76EE\\u6807\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u7BA1\\u7406\\u6D3B\\u52A8\\u751F\\u547D\\u5468\\u671F\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u6D3B\\u52A8\\u73A9\\u6CD5\\u548C\\u76F8\\u5173\\u673A\\u5236\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5404\\u4E2A\\u9636\\u6BB5/\\u6E20\\u9053\\u7684\\u8D44\\u6E90\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u6D3B\\u52A8\\u7684\\u6295\\u653E\\u5173\\u8054\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u6D3B\\u52A8\\u7684\\u5FEB\\u7167\\u3001\\u8D26\\u6237\\u548C\\u73B0\\u91D1\\u6574\\u6D41\\u7A0B\\u7EDF\\u8BA1\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5173\\u8054\\u6D3B\\u52A8\\u6548\\u679C\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u76EE\\u6807\\u548C\\u4EFB\\u52A1\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u6D3B\\u52A8\\u5173\\u8054\\u7684\\u6548\\u679C\\u6570\\u636E\\u3001\\u62A5\\u8868\\u3001\\u7528\\u6237\\u6570\\u636E\\u3001\\u8D26\\u6237\\u6570\\u636E\\u7B49\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u9632\\u4F5C\\u5F0A\\u652F\\u6301\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u7B2C\\u4E09\\u65B9\\u6570\\u636E\\u5BF9\\u63A5\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u6D3B\\u52A8\\u5206\\u7C7B\\u548C\\u7EC6\\u5219\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u7565\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u6280\\u672F\\u8D44\\u6E90\\u7BA1\\u7406\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"H5 \\u9875\\u9762\\u5E73\\u53F0\\u3001\\u516C\\u5171\\u8D44\\u6E90\\u3001\\u6A21\\u677F\\u3001\\u7EC4\\u4EF6\\u7B49\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u6D3B\\u52A8\\u8D44\\u6E90\\u6253\\u5305\\u3001\\u5206\\u53D1\\u7B49\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u6D4B\\u8BD5\\u673A\\u5236\")))), mdx(\"hr\", null), mdx(Logo, {\n    mdxType: \"Logo\"\n  }), mdx(\"h2\", null, \"\\u5E73\\u53F0\\u9636\\u6BB5\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u6D3B\\u52A8\\u73A9\\u6CD5\\u6574\\u7406\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u540E\\u53F0\\u642D\\u5EFA\\u6574\\u4E2A\\u6D3B\\u52A8\\u73A9\\u6CD5\\u548C\\u5468\\u671F\\u7684\\u652F\\u6301\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"CMS \\u4E2D\\u6DFB\\u52A0\\u6D3B\\u52A8\\u914D\\u7F6E\\u548C\\u7BA1\\u7406\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u6309\\u7167\\u6D3B\\u52A8/\\u6E20\\u9053\\u7EDF\\u8BA1\\u6570\\u636E\\uFF0C\\u5E76\\u63D0\\u4F9B\\u62A5\\u8868\\u5C55\\u793A\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"H5 \\u7BA1\\u7406\\u5E73\\u53F0\\uFF0C\\u63D0\\u4F9B\\u516C\\u5171\\u8D44\\u6E90\\u3001\\u9884\\u4E0B\\u8F7D\\u6570\\u636E\\u3001\\u9875\\u9762\\u5206\\u53D1\\u6253\\u5305\")), mdx(\"p\", null, \"/\", mdx(\"em\", {\n    parentName: \"p\"\n  }, \" \\u5176\\u4ED6\\u7565 \"), \"/\"), mdx(\"hr\", null), mdx(Logo, {\n    mdxType: \"Logo\"\n  }), mdx(\"h2\", null, \"\\u5F00\\u53D1\\u9636\\u6BB5\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u4E1A\\u52A1\\u8BBE\\u8BA1\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u4EFB\\u52A1\\u548C\\u6392\\u671F\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u6D4B\\u8BD5\\u548C\\u9A8C\\u6536\")), mdx(\"p\", null, \"/\", mdx(\"em\", {\n    parentName: \"p\"\n  }, \" \\u5176\\u4ED6\\u7565 \"), \"/\"), mdx(\"hr\", null), mdx(Logo, {\n    mdxType: \"Logo\"\n  }), mdx(\"h1\", null, \"Thank You\"), mdx(\"div\", {\n    style: {\n      fontSize: \".5em\"\n    }\n  }, \"/ ** \\u6280\\u672F\\u56E2\\u961F\\u5206\\u4EAB \\xB7 \\u524D\\u7AEF \\xB7 Ubug ** /\"), mdx(CopyRight, {\n    mdxType: \"CopyRight\"\n  }));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"活动页 H5 项目平台","date":"2020-08-25 11:36:21","description":null,"tech":null,"slug":"h5-activity"},"fields":{"slug":"/slides/work/h5-activity","theme":"ms","isSlide":true}}},{"node":{"id":"16fe7356-cf8a-545f-9f6a-d95cca024281","body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\nfunction ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }\nfunction _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }\nfunction _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == typeof i ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != typeof i) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\n/* @jsx mdx */\n\nconst LineHeightDemo1 = () => {\n  const [val, setVal] = React.useState(120);\n  const [size, setSize] = React.useState(60);\n  const posStyle = {\n    position: 'absolute',\n    left: '50%',\n    fontSize: 15,\n    background: '#4a4a4a',\n    width: '50%',\n    display: 'flex',\n    alignItems: 'center',\n    padding: '0 10px',\n    justifyContent: 'start',\n    lineHeight: '1px',\n    boxSizing: 'border-box'\n  };\n  return mdx(\"div\", {\n    style: {\n      width: '36vw',\n      padding: 20,\n      textAlign: 'left',\n      fontSize: 20\n    }\n  }, mdx(\"h4\", null, \"\\u5355\\u884C\\u6587\\u672C\\u6F14\\u793A lineHeight \\u548C fontSize \\u600E\\u4E48\\u51B3\\u5B9A\\u6587\\u5B57\\u4E0A\\u4E0B\\u8FB9\\u6846\\u5927\\u5C0F\\u7684\\uFF1A\"), mdx(\"p\", null, \"line-height: \", val, \"px;\", mdx(\"input\", {\n    type: \"range\",\n    min: 90,\n    max: 160,\n    step: 1,\n    value: val,\n    onChange: e => setVal(e.target.value)\n  })), mdx(\"p\", null, \"fontSize: \", \"\".concat(size, \"px\"), \";\", mdx(\"input\", {\n    type: \"range\",\n    min: 40,\n    max: 80,\n    step: 1,\n    value: size,\n    onChange: e => setSize(e.target.value)\n  })), mdx(\"div\", {\n    style: {\n      background: '#2f2f2f',\n      padding: 0,\n      fontSize: \"\".concat(size, \"px\"),\n      lineHeight: \"\".concat(val, \"px\"),\n      position: 'relative'\n    }\n  }, \"Hello World!\", mdx(\"div\", {\n    style: _objectSpread(_objectSpread({}, posStyle), {}, {\n      top: 0,\n      height: (val - size) / 2\n    })\n  }, \"(lineHeight - fontSize) / 2 = \", (val - size) / 2, \"px\"), mdx(\"div\", {\n    style: _objectSpread(_objectSpread({}, posStyle), {}, {\n      bottom: 0,\n      height: (val - size) / 2\n    })\n  }, \"(\", val, \" - \", size, \") / 2 = \", (val - size) / 2, \"px\"), mdx(\"div\", {\n    style: _objectSpread(_objectSpread({}, posStyle), {}, {\n      width: '100%',\n      left: 0,\n      border: 'none',\n      justifyContent: 'flex-end',\n      background: '#a24d4d4f',\n      top: (val - size) / 2,\n      height: \"\".concat(size, \"px\")\n    })\n  }, \"fontSize = \", size, \"px\")));\n};\nconst LineHeightDemo2 = () => {\n  const [val, setVal] = React.useState(1);\n  const [size, setSize] = React.useState(30);\n  return mdx(\"div\", {\n    style: {\n      width: '36vw',\n      padding: 20,\n      textAlign: 'left',\n      fontSize: 20\n    }\n  }, mdx(\"p\", null, \"line-height: \", val, \";\", mdx(\"input\", {\n    type: \"range\",\n    min: 0.2,\n    max: 3,\n    step: 0.1,\n    value: val,\n    onChange: e => setVal(e.target.value)\n  })), mdx(\"p\", null, \"fontSize: \", \"\".concat(size, \"px\"), \";\", mdx(\"input\", {\n    type: \"range\",\n    min: 12,\n    max: 40,\n    step: 1,\n    value: size,\n    onChange: e => setSize(e.target.value)\n  })), mdx(\"p\", {\n    style: {\n      background: '#2f2f2f',\n      padding: 10,\n      fontSize: \"\".concat(size, \"px\"),\n      lineHeight: val\n    }\n  }, \"The first drops of rain are huge; they split into the dust on the ground, and plunk on the roof. The rain now becomes a torrent, flung by a rising wind.\"));\n};\nconst ImgDemo1 = () => {\n  const [block, setBlock] = React.useState(false);\n  const [size, setSize] = React.useState(30);\n  const [lineHeight, setLineHeight] = React.useState(60);\n  const [font, setFont] = React.useState('monospace');\n  return mdx(\"div\", {\n    style: {\n      width: 'auto',\n      padding: 20,\n      textAlign: 'left',\n      fontSize: 20\n    }\n  }, mdx(\"p\", null, \"line-height: \", lineHeight, \";\", mdx(\"input\", {\n    type: \"range\",\n    min: 40,\n    max: 100,\n    step: 0.1,\n    value: lineHeight,\n    onChange: e => setLineHeight(e.target.value)\n  }), mdx(\"br\", null), \"fontSize: \", \"\".concat(size, \"px\"), \";\", mdx(\"input\", {\n    type: \"range\",\n    min: 12,\n    max: 40,\n    step: 1,\n    value: size,\n    onChange: e => setSize(e.target.value)\n  }), mdx(\"br\", null), \"font-family:\", mdx(\"select\", {\n    value: font,\n    onChange: e => setFont(e.target.value)\n  }, mdx(\"option\", {\n    value: \"cursive\"\n  }, \"cursive\"), mdx(\"option\", {\n    value: \"fantasy\"\n  }, \"fantasy\"), mdx(\"option\", {\n    value: \"monospace\"\n  }, \"monospace\"), mdx(\"option\", {\n    value: \"sans-serif\"\n  }, \"sans-serif\")), \";\"), mdx(\"div\", {\n    style: {\n      background: '#2f2f2f',\n      fontFamily: font,\n      fontSize: \"\".concat(size, \"px\"),\n      lineHeight: \"\".concat(lineHeight, \"px\"),\n      position: 'relative'\n    }\n  }, mdx(\"img\", {\n    style: {\n      background: '#2c3461',\n      width: 100,\n      height: 100\n    }\n  }), mdx(\"span\", null, \"abcjyq\")));\n};\nconst _frontmatter = {\n  \"slug\": \"thinking-css\",\n  \"title\": \"一些 CSS 能力和原理\",\n  \"theme\": \"dark\",\n  \"date\": \"2020-07-23 18:16:01\",\n  \"published\": true\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst Split = makeShortcode(\"Split\");\nconst ChatBoxItem = makeShortcode(\"ChatBoxItem\");\nconst layoutProps = {\n  LineHeightDemo1,\n  LineHeightDemo2,\n  ImgDemo1,\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Some CSS Capabilities and Principles\"), mdx(\"h3\", null, \"\\u4E00\\u4E9B CSS \\u80FD\\u529B\\u548C\\u539F\\u7406\"), mdx(\"p\", null, \"\\u5206\\u4EAB\\u4E00\\u4E9B\\u6BD4\\u8F83\\u5E38\\u89C1\\u7684\\u6837\\u5F0F\\u3001\\u5904\\u7406\\u65B9\\u6CD5\\u548C\\u5176\\u4E2D\\u7684\\u539F\\u7406\"), mdx(\"div\", {\n    style: {\n      fontSize: \".5em\"\n    }\n  }, \"/ ** \\u6280\\u672F\\u56E2\\u961F\\u5206\\u4EAB \\xB7 \\u524D\\u7AEF \\xB7 Ubug ** /\"), mdx(\"hr\", null), mdx(\"h3\", null, \"line-height \\u884C\\u9AD8\"), mdx(\"p\", null, \"\\u5355\\u884C\\u6587\\u672C\\u5782\\u76F4\\u5C45\\u4E2D\\u4E3A\\u4EC0\\u4E48\\uFF1F\"), mdx(Split, {\n    mdxType: \"Split\"\n  }, mdx(\"ul\", {\n    style: {\n      fontSize: '20px',\n      width: '36vw'\n    }\n  }, mdx(\"li\", {\n    style: {\n      marginBottom: 10,\n      color: '#717171'\n    }\n  }, \"\\u8BE5\\u5C5E\\u6027\\u4F1A\\u5F71\\u54CD\\u884C\\u6846\\u7684\\u5E03\\u5C40\\u3002\\u5728\\u5E94\\u7528\\u5230\\u4E00\\u4E2A\\u5757\\u7EA7\\u5143\\u7D20\\u65F6\\uFF0C\\u5B83\\u5B9A\\u4E49\\u4E86\\u8BE5\\u5143\\u7D20\\u4E2D\\u57FA\\u7EBF\\u4E4B\\u95F4\\u7684\\u6700\\u5C0F\\u8DDD\\u79BB\\u800C\\u4E0D\\u662F\\u6700\\u5927\\u8DDD\\u79BB\\u3002\"), mdx(\"li\", {\n    style: {\n      marginBottom: 10,\n      color: '#fff'\n    }\n  }, mdx(\"strong\", null, \"line-height \\u4E0E fontSize \\u7684\\u8BA1\\u7B97\\u503C\\u4E4B\\u5DEE\\uFF08\\u5728 CSS \\u4E2D\\u6210\\u4E3A\\u201C\\u884C\\u95F4\\u8DDD\\u201D\\uFF09\\u5206\\u4E3A\\u4E24\\u534A\\uFF0C\\u5206\\u522B\\u52A0\\u5230\\u4E00\\u4E2A\\u6587\\u672C\\u884C\\u5185\\u5BB9\\u7684\\u9876\\u90E8\\u548C\\u5E95\\u90E8\\u3002\\u53EF\\u4EE5\\u5305\\u542B\\u8FD9\\u4E9B\\u5185\\u5BB9\\u7684\\u6700\\u5C0F\\u6846\\u5C31\\u662F\\u884C\\u6846\\u3002\")), mdx(\"li\", {\n    style: {\n      marginBottom: 10,\n      color: '#717171'\n    }\n  }, \"\\u539F\\u59CB\\u6570\\u5B57\\u503C\\u6307\\u5B9A\\u4E86\\u4E00\\u4E2A\\u7F29\\u653E\\u56E0\\u5B50\\uFF0C\\u540E\\u4EE3\\u5143\\u7D20\\u4F1A\\u7EE7\\u627F\\u8FD9\\u4E2A\\u7F29\\u653E\\u56E0\\u5B50\\u800C\\u4E0D\\u662F\\u8BA1\\u7B97\\u503C\\u3002\")), mdx(LineHeightDemo1, {\n    mdxType: \"LineHeightDemo1\"\n  })), mdx(\"hr\", null), mdx(\"h3\", null, \"img \\u6807\\u7B7E\\u6491\\u9AD8\\u5916\\u90E8 div\"), mdx(\"p\", null, \"\\u4E0D\\u4F5C\\u4EFB\\u4F55\\u5904\\u7406\\uFF0Cdiv \\u91CC\\u9762\\u5305\\u542B img\\uFF0C\\u90A3\\u4E48\\u5E95\\u90E8\\u4F1A\\u51FA\\u73B0\\u4E00\\u4E2A\\u5F88\\u5C0F\\u7684\\u7A7A\\u9699\\u3002\"), mdx(Split, {\n    mdxType: \"Split\"\n  }, mdx(\"ul\", {\n    style: {\n      fontSize: '20px'\n    }\n  }, mdx(\"li\", {\n    style: {\n      marginBottom: 10,\n      color: '#fff'\n    }\n  }, \"img \\u662F\\u4E00\\u79CD inline\\uFF0C\\u4F46\\u662F\\u6BD4\\u8F83\\u7279\\u6B8A\\uFF0C\\u53EF\\u4EE5\\u8BBE\\u7F6E\\u5BBD\\u9AD8\\u3001\\u5782\\u76F4\\u5E03\\u5C40\\u3001padding \\u4E4B\\u7C7B\\u7684\"), mdx(\"li\", {\n    style: {\n      marginBottom: 10,\n      color: '#fff'\n    }\n  }, \"img \\u9075\\u5FAA\\u6587\\u5B57\\u7684 vertical-align: baseline \\u7684 \", mdx(\"a\", {\n    href: \"https://en.wikipedia.org/wiki/Descender\",\n    target: \"_blank\",\n    rel: \"noopener noreferrer\"\n  }, \"\\u88C5\\u9970\"), \" \\u89C4\\u5219\\uFF0C\\u9700\\u8981\\u9884\\u7559 j\\u3001p\\u3001g \\u7B49\\u5B57\\u6BCD\\u7684\\u5C0F\\u5C3E\\u5DF4\\u3002\"), mdx(\"li\", {\n    style: {\n      marginBottom: 10,\n      color: '#fff'\n    }\n  }, \"\\u6240\\u4EE5\\u8BBE\\u7F6E display \\u6216\\u8005 vertical-align \\u5C5E\\u6027\\u80FD\\u591F\\u53BB\\u9664\\u8FD9\\u4E2A\\u7A7A\\u9699\\u3002\"), mdx(\"li\", {\n    style: {\n      marginBottom: 10,\n      color: '#fff'\n    }\n  }, \"\\u5177\\u4F53\\u8FD9\\u4E2A\\u95F4\\u9699\\u5927\\u5C0F\\u4E0E\\u5B57\\u4F53\\u3001\\u5B57\\u4F53\\u5927\\u5C0F\\u3001line-height \\u6709\\u5173\")), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"645px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/323937b4b9815f6492ec97bcda27d000/19520/css-img-baseline-2.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"75.67567567567568%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsSAAALEgHS3X78AAACW0lEQVQ4y5VUyU4bQRD1/99MDnAjcAmLI1kgiJDBkiFRApxwQozCIcaexeuMxz37jP3yqseexByipKWn6q7qfrWqK8vlErLCJIPrR3CDArMgJgrp+OE/o7ImjOIEKgi1DFf7IIwoAyRZTmR/QY50hZKw13vB/f09vrbbeOp8xzeRTx10Oh38zyoJlVIYjUaYuB6GjoeJp+C4MziOg8lsrveu6xCu1k2nU3izmX4jb2UJV0koF/r9PgbDIXp9A/ZgiL5podvr4SfPL4Rh2egZpoZhWdpuUjp8u+YpCT3lwxqNMabHwWCAIYmDiPVMUgRxIdd7QZRmutaLxbKMboMwiiJ43hy+7+tUJI0wDPQ5ZGMCIgpDLUVXSIU0TUvCjZRncwVzyOjGU1iUtm3BYjqWbcM0TR21zb1IwzC0bcCySCbz+XyzKZ7nQdGrYLnyluc501lspCM6gZzFJsg4Nmu9QBPGcYzxeKy9ShQ6fF6OWQbpqJQjoLP1SpKkdKYdcp+QQ/QVnS5rtrX1BoeHh6hWq/h4c4PPd3d4X6/j7e4ujmo11E9P0Ww2cXl5ifbDAz5cXOAL71xR17y+1uMjTjRht9tFo9FAjQ9rx8c45+XzgwMcbW/j0+0t3pH0ZH8fJ2dnuG61tP2Kzut7e9jb2UGLd388PhY1FFYJteh0EXZCnXp+RkhHOfUpM0jYjFjqRfjstugyyoSlyDnsMgEJO65rKK0XojwvHuQ8S4WELKM+o4NcGkVbltEmDZCGrBqh7bSxmr/HJuDQTtQfP4cKCvAHckSvXv0s6hWom1L+AjtjbmeWl7NtAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"MDN + wiki\",\n    \"title\": \"MDN + wiki\",\n    \"src\": \"/static/323937b4b9815f6492ec97bcda27d000/19520/css-img-baseline-2.png\",\n    \"srcSet\": [\"/static/323937b4b9815f6492ec97bcda27d000/2c191/css-img-baseline-2.png 259w\", \"/static/323937b4b9815f6492ec97bcda27d000/86b01/css-img-baseline-2.png 518w\", \"/static/323937b4b9815f6492ec97bcda27d000/19520/css-img-baseline-2.png 645w\"],\n    \"sizes\": \"(max-width: 645px) 100vw, 645px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"MDN + wiki\"), \"\\n  \")), mdx(ImgDemo1, {\n    mdxType: \"ImgDemo1\"\n  })), mdx(\"p\", null, \"{/\", mdx(\"em\", {\n    parentName: \"p\"\n  }, \" \\u5982\\u679C\\u662F\\u666E\\u901A\\u7684\\u7F51\\u9875\\uFF0C\\u6700\\u597D\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"em\"\n  }, \"maxWidth: 100%;\"), \" \\u9650\\u5236\\u56FE\\u7247\\u9884\\u671F\\u4E4B\\u5916\\u3001\\u4E0D\\u53D7\\u63A7\\u5236\\u7684\\u5BBD\\u5EA6\\u95EE\\u9898\\u3002 \"), \"/}\"), mdx(\"p\", {\n    style: {\n      fontSize: 15\n    }\n  }, \"\\u8BE6\\u60C5\\u53EF\\uFF1Ahttps://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/\"), mdx(\"hr\", null), mdx(\"h3\", null, \"fixed \\u5B9A\\u4F4D\\u76F8\\u5BF9\\u5BB9\\u5668\\u5B9A\\u4F4D\"), mdx(Split, {\n    mdxType: \"Split\"\n  }, mdx(\"p\", null, \"transform \\u5C5E\\u6027\\u5BB9\\u5668\\u7684\\u5143\\u7D20\\uFF0C\\u5176\\u5B50\\u5143\\u7D20\\u7684 fixed \\u5B9A\\u4F4D\\u5C5E\\u6027\\u90FD\\u4F1A\\u4EE5 transform \\u5BB9\\u5668\\u4E3A\\u51C6\"), mdx(\"div\", {\n    style: {\n      position: 'relative',\n      background: '#edc',\n      margin: '0 auto',\n      width: 300,\n      height: 300,\n      fontSize: 12,\n      color: '#000'\n    }\n  }, mdx(\"div\", {\n    style: {\n      position: 'absolute',\n      background: '#efb',\n      bottom: 20,\n      right: 20,\n      width: 100,\n      height: 100\n    }\n  }, \"absolute to div\"), mdx(\"div\", {\n    style: {\n      transform: 'translate(0)'\n    }\n  }, mdx(\"div\", {\n    style: {\n      position: 'fixed',\n      background: '#efb',\n      top: 20,\n      right: 20,\n      width: 100,\n      height: 100\n    }\n  }, \"fixed to div\")), mdx(\"div\", {\n    style: {\n      position: 'fixed',\n      background: '#efb',\n      top: 20,\n      left: 20,\n      width: 100,\n      height: 100\n    }\n  }, \"fixed to window\"))), mdx(\"hr\", null), mdx(\"h3\", null, \"\\u6CA1\\u6709\\u8BBE\\u7F6E\\u5B9A\\u4F4D\\u7684 absolute\"), mdx(Split, {\n    mdxType: \"Split\"\n  }, \"\\u6CA1\\u6709\\u5E94\\u7528 left / top \\u7B49\\u5C5E\\u6027\\u503C\\u7684 absolute \\u5143\\u7D20\\u5C31\\u662F\\u4E2A\\u4E0D\\u5360\\u636E\\u7A7A\\u95F4\\u7684\\u666E\\u901A\\u5143\\u7D20\", mdx(\"div\", {\n    style: {\n      position: 'relative',\n      background: '#edc',\n      margin: '0 auto',\n      width: 300,\n      height: 300,\n      fontSize: 20,\n      color: '#000'\n    }\n  }, \"abcd\", mdx(\"span\", {\n    style: {\n      position: 'absolute'\n    }\n  }, \"efg\"), \"hijklmnop\", mdx(\"span\", {\n    style: {\n      position: 'absolute',\n      bottom: 20\n    }\n  }, \"qrs\"), \"tuvwxyz\")), mdx(\"hr\", null), mdx(\"h3\", null, \"img, select, input \\u884C\\u5185\\u5143\\u7D20\\u4E3A\\u4EC0\\u4E48\\u80FD\\u8BBE\\u7F6E\\u5BBD\\u9AD8\"), mdx(Split, {\n    mdxType: \"Split\"\n  }, mdx(\"div\", {\n    style: {\n      width: '40vw',\n      margin: '0 auto'\n    }\n  }, mdx(ChatBoxItem, {\n    width: \"36vw\",\n    side: \"left\",\n    mdxType: \"ChatBoxItem\"\n  }, \"Q: \\u6709\\u54EA\\u4E9B\\u884C\\u5185\\u5143\\u7D20\"), mdx(ChatBoxItem, {\n    width: \"36vw\",\n    side: \"right\",\n    mdxType: \"ChatBoxItem\"\n  }, \"A: span\\u3001strong\\u3001em\\u3001i\\u3001img \\u7B49\"), mdx(ChatBoxItem, {\n    width: \"36vw\",\n    side: \"left\",\n    mdxType: \"ChatBoxItem\"\n  }, \"Q: \\u884C\\u5185\\u5143\\u7D20\\u80FD\\u8BBE\\u7F6E\\u5BBD\\u9AD8\\u5417\\uFF1F\"), mdx(ChatBoxItem, {\n    width: \"36vw\",\n    side: \"right\",\n    mdxType: \"ChatBoxItem\"\n  }, \"A: \\u90A3\\u80AF\\u5B9A\\u4E0D\\u80FD\\u4E86\\uFF01\"), mdx(ChatBoxItem, {\n    width: \"36vw\",\n    side: \"left\",\n    mdxType: \"ChatBoxItem\"\n  }, \"Q: img \\u8BBE\\u7F6E\\u5BBD\\u9AD8\\u600E\\u4E48\\u56DE\\u4E8B\\uFF1F\"), mdx(ChatBoxItem, {\n    width: \"36vw\",\n    side: \"right\",\n    mdxType: \"ChatBoxItem\"\n  }, \"A: \\u5443(\\u2299o\\u2299)\\u2026\")), mdx(\"div\", null, \"The first drops of \", mdx(\"img\", {\n    width: \"80\",\n    height: \"80\",\n    style: {\n      background: '#ed1'\n    }\n  }), \" rain are huge; they split into the dust on the ground, and plunk on the roof\", mdx(\"input\", {\n    type: \"text\",\n    placeholder: \"\\u8F93\\u5165\\u6846\",\n    width: \"40\",\n    height: \"20\"\n  }), \". The rain now becomes a torrent, flung by a rising wind.\")), mdx(\"hr\", null), mdx(\"h3\", null, \"\\u6697\\u9ED1\\u6A21\\u5F0F\"), mdx(Split, {\n    mdxType: \"Split\"\n  }, mdx(\"div\", null, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \"html[theme='dark-mode'] {\\n  filter: invert(1) hue-rotate(180deg);\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \"html[theme='dark-mode'] .div-overlay-top{\\n  width: 100%;\\n  height: 100%;\\n  top: 0;\\n  left: 0;\\n  backdrop-filter: invert(1) hue-rotate(180deg);\\n}\\n\"))), mdx(\"div\", {\n    style: {\n      width: '40px'\n    }\n  }), mdx(\"div\", {\n    style: {\n      position: 'relative',\n      background: '#fff',\n      color: '#000'\n    }\n  }, mdx(\"h4\", null, \"Hi, How are you doing ~~~?\"), mdx(\"p\", null, \"It's very nice to meet you.\"), mdx(\"div\", {\n    style: {\n      position: 'absolute',\n      width: '50%',\n      height: '100%',\n      top: '0',\n      left: '0',\n      pointerEvents: 'none',\n      backdropFilter: 'invert(1) hue-rotate(180deg)'\n    }\n  }))), mdx(\"hr\", null), mdx(\"h1\", null, \"Thank You\"), mdx(\"div\", {\n    style: {\n      fontSize: \".5em\"\n    }\n  }, \"/ ** \\u6280\\u672F\\u56E2\\u961F\\u5206\\u4EAB \\xB7 \\u524D\\u7AEF \\xB7 Ubug ** /\"));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"一些 CSS 能力和原理","date":"2020-07-23 18:16:01","description":null,"tech":null,"slug":"thinking-css"},"fields":{"slug":"/slides/skills/thinking-css","theme":"dark","isSlide":true}}},{"node":{"id":"490b076c-1437-56a7-a268-2bb31b86ebba","body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"progressive-engineering\",\n  \"title\": \"渐进式工程化\",\n  \"theme\": \"dark\",\n  \"date\": \"2020-06-19 19:46:31\",\n  \"published\": true\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst ChatBoxItem = makeShortcode(\"ChatBoxItem\");\nconst Split = makeShortcode(\"Split\");\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Progressive Engineering\"), mdx(\"h3\", null, \"\\u6E10\\u8FDB\\u5F0F\\u5DE5\\u7A0B\\u5316\"), mdx(\"div\", {\n    style: {\n      fontSize: \".5em\"\n    }\n  }, \"/ ** \\u6280\\u672F\\u56E2\\u961F\\u5206\\u4EAB \\xB7 \\u524D\\u7AEF \\xB7 Ubug ** /\"), mdx(\"hr\", null), mdx(\"h3\", null, \"1. \\u4EC0\\u4E48\\u662F\\u5DE5\\u7A0B\\u5316\\uFF1F\"), mdx(\"h3\", null, \"2. \\u4EC0\\u4E48\\u662F\\u6E10\\u8FDB\\u5F0F\\uFF1F\"), mdx(\"hr\", null), mdx(\"h3\", null, \"\\u76D6\\u623F\\u5B50\\u600E\\u4E48\\u9009\\u65BD\\u5DE5\\u961F \\uD83D\\uDEA7 \\uFF1F\"), mdx(ChatBoxItem, {\n    side: \"left\",\n    mdxType: \"ChatBoxItem\"\n  }, \"\\u76D6\\u623F\\u5B50\\u600E\\u4E48\\u9009\\u65BD\\u5DE5\\u961F \\uD83D\\uDEA7 \\uFF1F\"), mdx(ChatBoxItem, {\n    side: \"right\",\n    mdxType: \"ChatBoxItem\"\n  }, \"\\u9760\\u8C31\\u3002\"), mdx(ChatBoxItem, {\n    side: \"left\",\n    mdxType: \"ChatBoxItem\"\n  }, \"\\u600E\\u4E48\\u7B97\\u9760\\u8C31\\u5462\\uFF1F\"), mdx(ChatBoxItem, {\n    side: \"right\",\n    mdxType: \"ChatBoxItem\"\n  }, \"\\u80FD\\u4E0D\\u80FD\\u628A\\u63A7\\u5DE5\\u671F\\u3001\\u8D28\\u91CF\\u548C\\u7ECF\\u8D39\\u7B49\\u3002\"), mdx(ChatBoxItem, {\n    side: \"left\",\n    mdxType: \"ChatBoxItem\"\n  }, \"\\u600E\\u4E48\\u770B\\u51FA\\u6765\\u5462\\uFF1F\"), mdx(ChatBoxItem, {\n    side: \"right\",\n    mdxType: \"ChatBoxItem\"\n  }, \"\\u6709\\u6CA1\\u6709\\u4ECE\\u4EE5\\u524D\\u7684\\u9879\\u76EE\\u603B\\u7ED3\\u51FA\\u5DE5\\u5E8F\\uFF0C\\u6709\\u6CA1\\u6709\\u4E13\\u4E1A\\u5668\\u68B0\\uFF0C\\u6709\\u6CA1\\u6709\\u6D41\\u7A0B\\u7BA1\\u7406\\u3001\\u8D28\\u91CF\\u628A\\u63A7\\u7B49\\u3002\"), mdx(\"hr\", null), mdx(\"h3\", null, \"\\u6240\\u4EE5\"), mdx(\"p\", null, \"\\u65E0\\u8BBA\\u662F\\u5DE5\\u5382\\u7684\\u6D41\\u6C34\\u7EBF\\u3001\\u8FD8\\u662F\\u5EFA\\u7B51\\u5DE5\\u7A0B\\u8FC7\\u7A0B\\uFF0C\\u5176\\u52B3\\u52A8\\u8FC7\\u7A0B\\u53EF\\u4EE5\\u4F7F\\u7528\\u5DE5\\u5177\\u548C\\u5668\\u68B0\\u3001\\u53EF\\u4EE5\\u4E8B\\u5148\\u89C4\\u5B9A\\u6D41\\u6C34\\u7EBF\\u7684\\u6D41\\u7A0B\\uFF0C\\u8FDB\\u800C\\u8FDB\\u884C\\u91CD\\u590D\\u52B3\\u52A8\\uFF0C\\u63D0\\u5347\\u6548\\u7387\\u3002\"), mdx(\"hr\", null), mdx(Split, {\n    mdxType: \"Split\"\n  }, mdx(\"div\", null, mdx(\"h2\", null, \"\\u5DE5\\u7A0B\\u548C\\u5DE5\\u7A0B\\u5316\"), mdx(\"div\", null, \"\\u6784\\u5EFA\\u4E00\\u4E2A\\u8F6F\\u4EF6\\u4E2D\\uFF0C\\u4E3A\\u4E86\\u63D0\\u5347\\u5F00\\u53D1\\u6548\\u7387\\u6216\\u8005\\u8D28\\u91CF\\u7B49\\uFF0C\\u7528\\u5230\\u7684\\u811A\\u624B\\u67B6\\u3001\\u5904\\u7406\\u5DE5\\u5177\\u3001\\u811A\\u672C\\u3001\\u7EC4\\u4EF6\\u5E93\\u3001\\u6784\\u5EFA\\u6D41\\u7A0B\\u3001\\u90E8\\u7F72\\u7B49\\u90FD\\u7B97\\u662F\\u5DE5\\u7A0B\\u5316\\u7684\\u652F\\u6301\\u3002\")), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"680px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/cb163b0a352ff2aea0b0cf979d487b6d/111ef/scaffold.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"66.79536679536679%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAABAACBf/EABUBAQEAAAAAAAAAAAAAAAAAAAID/9oADAMBAAIQAxAAAAEyAYoG3Mkf/8QAGxABAAICAwAAAAAAAAAAAAAAAQACBBMDEiH/2gAIAQEAAQUCKe6CayOTbo5FmPIs/8QAFxEAAwEAAAAAAAAAAAAAAAAAAAETAv/aAAgBAwEBPwGeSaP/xAAXEQADAQAAAAAAAAAAAAAAAAAAARMC/9oACAECAQE/AbaLM//EABoQAAICAwAAAAAAAAAAAAAAAAEQAGECERL/2gAIAQEABj8CFvnWMFL/xAAZEAADAQEBAAAAAAAAAAAAAAABESEAMRD/2gAIAQEAAT8haJBZBseaaYRq4gwChZN2BdO//9oADAMBAAIAAwAAABCv/wD/xAAWEQEBAQAAAAAAAAAAAAAAAAAAAWH/2gAIAQMBAT8Qo2f/xAAWEQEBAQAAAAAAAAAAAAAAAAAAAWH/2gAIAQIBAT8Qhzf/xAAeEAEBAAIBBQEAAAAAAAAAAAABEQAhMUFRYXGRof/aAAgBAQABPxCWokjp4tub2gd2Y0dSe8SiBAR9XLTxgUHk3vzkwo6Td+5//9k=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"scaffold\",\n    \"title\": \"scaffold\",\n    \"src\": \"/static/cb163b0a352ff2aea0b0cf979d487b6d/111ef/scaffold.jpg\",\n    \"srcSet\": [\"/static/cb163b0a352ff2aea0b0cf979d487b6d/fca29/scaffold.jpg 259w\", \"/static/cb163b0a352ff2aea0b0cf979d487b6d/f4507/scaffold.jpg 518w\", \"/static/cb163b0a352ff2aea0b0cf979d487b6d/111ef/scaffold.jpg 680w\"],\n    \"sizes\": \"(max-width: 680px) 100vw, 680px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"))), mdx(\"hr\", null), mdx(\"h2\", null, \"\\u5DE5\\u7A0B\\u5316\\u7684\\u524D\\u63D0: \\u5DE5\\u7A0B\\u6536\\u76CA\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u5E94\\u7528\\u590D\\u6742\\u5EA6\\u8F83\\u9AD8\\uFF0C\\u9700\\u8981\\u5DE5\\u7A0B\\u5316\\u63D0\\u5347\\u6548\\u7387\"), mdx(\"p\", null, mdx(\"small\", null, \"\\u4E00\\u4E2A\\u5927\\u578B\\u5E94\\u7528\\uFF0C\\u5305\\u62EC\\u7F16\\u8BD1\\u3001\\u6D4B\\u8BD5\\u3001\\u811A\\u672C\\u3001\\u63A5\\u53E3\\u7EF4\\u62A4\\u3001\\u591A\\u5206\\u652F\\u5F00\\u53D1\\u7B49\\uFF0C\\u590D\\u6742\\u5EA6\\u4E0A\\u8003\\u8651\\uFF0C\\u5FC5\\u987B\\u7528\\u5DE5\\u7A0B\\u5316\\u7684\\u624B\\u6BB5\\uFF0C\\u8BA9\\u5F00\\u53D1\\u8005\\u66F4\\u80FD\\u805A\\u7126\\u5728\\u4E1A\\u52A1\\u4E0A\\u3002\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"\\u6709\\u592A\\u591A\\u53EF\\u91CD\\u590D\\u7684\\u6784\\u4EF6\\u548C\\u5F00\\u53D1\\u5DE5\\u4F5C\\uFF0C\\u9700\\u8981\\u5DE5\\u7A0B\\u5316\\u5DE5\\u5177\\u8F85\\u52A9\\u5F00\\u53D1\"), mdx(\"p\", null, mdx(\"small\", null, \"\\u5982\\u679C\\u4E1A\\u52A1\\u4E0A\\u6709\\u592A\\u591A\\u7684\\u76F8\\u4F3C\\u5E94\\u7528\\uFF0C\\u90A3\\u4E48\\u4ECE\\u5DE5\\u7A0B\\u7684\\u89D2\\u5EA6\\u6765\\u770B\\uFF0C\\u53EF\\u4EE5\\u62BD\\u53D6\\u51FA\\u7EC4\\u4EF6\\u5E93\\u3001\\u5F00\\u53D1\\u5DE5\\u5177\\u3001\\u7EDF\\u4E00\\u7684\\u5F00\\u53D1\\u6D41\\u7A0B\\u7B49\\u3002\")))), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u5DE5\\u7A0B\\u5316\\u80FD\\u591F\\u63D0\\u4F9B\\u66F4\\u654F\\u6377\\u7684\\u6784\\u5EFA\\u3001\\u90E8\\u7F72\\u3001\\u4EA4\\u4ED8\\u8282\\u594F\\u3002\\u5F88\\u591A\\u65F6\\u5019\\u9879\\u76EE\\u591A\\u3001\\u654F\\u6377\\u9700\\u6C42\\u3001\\u5F00\\u53D1\\u5468\\u671F\\u77ED\\u7B49\\uFF0C\\u903C\\u7740\\u6211\\u4EEC\\u4EA7\\u51FA\\u5DE5\\u7A0B\\u5316\\u7684\\u624B\\u6BB5\\u6765\\u5E94\\u5BF9\\u3002\")), mdx(\"hr\", null), mdx(\"h3\", null, \"\\u4EC0\\u4E48\\u662F\\u6E10\\u8FDB\\u5F0F\"), mdx(\"p\", null, \"\\u5F00\\u53D1\\u8FC7\\u7A0B\\u4E2D\\u4E0D\\u53EF\\u80FD\\u5148\\u628A\\u4E00\\u5207\\u90FD\\u642D\\u5EFA\\u597D\\u4E4B\\u540E\\u518D\\u5F00\\u53D1\\uFF0C\\u5C31\\u7B97\\u5F00\\u53D1\\u5B8C\\u6210\\u4E4B\\u540E\\u4E5F\\u4E0D\\u53EF\\u80FD\\u9002\\u7528\\u4E8E\\u5168\\u90E8\\u7684\\u9879\\u76EE\\uFF0C\\u6240\\u4EE5\\u6E10\\u8FDB\\u5F0F\\u7684\\u601D\\u60F3\\u63D0\\u4F9B\\u9010\\u6B65\\u652F\\u6301\\uFF0C\\u5E76\\u63D0\\u4F9B\\u53EF\\u63D2\\u62D4\\u3001\\u53EF\\u66FF\\u6362\\u7684\\u65B9\\u6848\\u3002\"), mdx(\"hr\", null), mdx(\"h3\", null, \"\\u4EE5\\u524D\\u7AEF\\u4E3A\\u4F8B\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u89C4\\u8303\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u76EE\\u5F55\\u89C4\\u8303\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u4EE3\\u7801\\u89C4\\u8303\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u9700\\u6C42\\u786E\\u5B9A\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"H5 \\u5355\\u9875 / \\u591A\\u9875\\u5E94\\u7528\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"HyBrid\\u3001\\u6DF7\\u5408\\u5F00\\u53D1\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u57FA\\u7840\\u6280\\u672F\\u6808\\uFF1ATS\\u3001Babel\\u3001Webpack\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"UI \\u65B9\\u6848\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u7EC4\\u4EF6\\u5E93\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u67B6\\u6784\\u65B9\\u6848\\uFF1A\\u76EE\\u5F55\\u7ED3\\u6784\\u3001\\u811A\\u624B\\u67B6\\u3001\\u6D4B\\u8BD5\\u65B9\\u6848\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u6280\\u672F\\u65B9\\u6848: \\u8BF7\\u6C42\\u5C42\\u3001\\u8DEF\\u7531\\u5C42\\u3001\\u5404\\u79CD\\u7279\\u6027\\u652F\\u6301\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u6D4B\\u8BD5\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u6784\\u5EFA\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u90E8\\u7F72\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u76D1\\u63A7\")), mdx(\"hr\", null), mdx(\"p\", null, \"/\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"*\", \" 400000000000000004 \", \"*\"), \"/\"), mdx(\"p\", null, \"/\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"*\", \" \\u5185\\u90E8\\u5206\\u4EAB \", \"*\"), \"/\"), mdx(\"p\", null, \"/\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"*\", \" ooooooooooops... \", \"*\"), \"/\"), mdx(\"hr\", null), mdx(\"h1\", null, \"Thank You\"), mdx(\"div\", {\n    style: {\n      fontSize: \".5em\"\n    }\n  }, \"/ ** \\u6280\\u672F\\u56E2\\u961F\\u5206\\u4EAB \\xB7 \\u524D\\u7AEF \\xB7 Ubug ** /\"));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"渐进式工程化","date":"2020-06-19 19:46:31","description":null,"tech":null,"slug":"progressive-engineering"},"fields":{"slug":"/slides/skills/progressive-engineering","theme":"dark","isSlide":true}}},{"node":{"id":"6c2106e8-ae7c-5564-932c-48e3ddbbc774","body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"web-assembly\",\n  \"title\": \"WebAssembly 从入门到放弃\",\n  \"theme\": \"code\",\n  \"date\": \"2020-03-21 10:06:39\",\n  \"published\": true\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"WebAssembly \\u4ECE\\u5165\\u95E8\\u5230\\u653E\\u5F03\"), mdx(\"div\", {\n    style: {\n      fontSize: \".5em\"\n    }\n  }, \"/ ** \\u6280\\u672F\\u56E2\\u961F\\u5206\\u4EAB \\xB7 \\u524D\\u7AEF \\xB7 Ubug ** /\"), mdx(\"hr\", null), mdx(\"p\", null, \"/\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"*\", \" \\u5DF2\\u653E\\u5F03 \", \"*\"), \"/\"), mdx(\"hr\", null), mdx(\"h1\", null, \"Thank You\"), mdx(\"div\", {\n    style: {\n      fontSize: \".5em\"\n    }\n  }, \"/ ** \\u6280\\u672F\\u56E2\\u961F\\u5206\\u4EAB \\xB7 \\u524D\\u7AEF \\xB7 Ubug ** /\"));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"WebAssembly 从入门到放弃","date":"2020-03-21 10:06:39","description":null,"tech":null,"slug":"web-assembly"},"fields":{"slug":"/slides/frontend/web-assembly","theme":"code","isSlide":true}}},{"node":{"id":"86a1435b-f2ec-551c-95bd-d01576020f40","body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"add-slides-to-gatsby\",\n  \"title\": \"在 Gatsby 中添加幻灯片演示\",\n  \"theme\": \"dark\",\n  \"date\": \"2020-03-19 21:16:31\",\n  \"published\": true\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst Notes = makeShortcode(\"Notes\");\nconst ChatBoxItem = makeShortcode(\"ChatBoxItem\");\nconst FullScreenCode = makeShortcode(\"FullScreenCode\");\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Slides with Gatsby\"), mdx(\"h3\", null, \"\\u5728 Gatsby \\u4E2D\\u6DFB\\u52A0\\u5E7B\\u706F\\u7247\\u6F14\\u793A\"), mdx(\"div\", {\n    style: {\n      fontSize: \".5em\"\n    }\n  }, \"/ ** \\u968F\\u4FBF\\u5199\\u5199 \\xB7 Ubug ** /\"), mdx(\"hr\", null), mdx(\"h3\", null, \"\\u5148\\u770B\\u6F14\\u793A\"), mdx(\"video\", {\n    controls: true,\n    loop: true,\n    style: {\n      maxHeight: \"80vh\",\n      maxWidth: \"80vw\"\n    }\n  }, mdx(\"source\", {\n    src: \"https://fdb.ubug.io/storybook-videos/slides.mp4\",\n    type: \"video/mp4\"\n  })), mdx(\"hr\", null), mdx(\"h3\", null, \"1. \\u652F\\u6301\\u591A\\u79CD\\u653E\\u6620\\u6A21\\u5F0F\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u666E\\u901A\\u6A21\\u5F0F - \\u6B63\\u5E38\\u5168\\u9875\\u653E\\u6620\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u6F14\\u793A\\u6A21\\u5F0F - \\u540C\\u6B65\\u64AD\\u653E\\u3001\\u591A\\u9875\\u9884\\u89C8\\u3001\\u67E5\\u770B\\u5907\\u6CE8\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u7F51\\u683C - \\u7F29\\u653E\\u5C55\\u793A\\u3001\\u5FEB\\u901F\\u5B9A\\u4F4D\")), mdx(\"div\", {\n    \"style\": {},\n    \"\\\"flex\\\",\": \"\",\n    \"margintop:\": \"\",\n    \"\\\"30px\\\"}}\": \"\"\n  }, \"\\n  \", mdx(\"div\", {\n    parentName: \"div\",\n    \"style\": {},\n    \"\\\"1\\\",\": \"\",\n    \"width:\": \"\",\n    \"\\\"30vw\\\",\": \"\",\n    \"margin:\": \"\",\n    \"\\\"0\": \"\",\n    \"10px\\\",\": \"\",\n    \"border:\": \"\",\n    \"\\\"1px\": \"\",\n    \"solid\\\"}}\": \"\"\n  }, mdx(\"span\", {\n    parentName: \"div\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"891px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/2e4b6630d8d1acb68225ecac0201d04d/8e5b9/1.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"55.5984555984556%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAAArUlEQVQoz9WSPQqEMBSEY1ACibGytlObRKy8QFKKRRLB+19klhcQbIRd3GK3GIaXn4F8GcYYw5f1b4FKKWitIYSAlDLP59p1rusanPP7wKIoshtjEGPEcRzYtg3eezjnslJKCCFgXVfs+45lWd57MoWXZYmqqjBNE6y16Ps+O+2dojMfMaRLFDLPM8ZxxDAMzz+FuDVNk5243nC7YvvR2rRti67rngee7SDW1IQXQubtgv1OsUUAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"1\",\n    \"title\": \"1\",\n    \"src\": \"/static/2e4b6630d8d1acb68225ecac0201d04d/8e5b9/1.png\",\n    \"srcSet\": [\"/static/2e4b6630d8d1acb68225ecac0201d04d/2c191/1.png 259w\", \"/static/2e4b6630d8d1acb68225ecac0201d04d/86b01/1.png 518w\", \"/static/2e4b6630d8d1acb68225ecac0201d04d/8e5b9/1.png 891w\"],\n    \"sizes\": \"(max-width: 891px) 100vw, 891px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), \"\\n  \", mdx(\"div\", {\n    parentName: \"div\",\n    \"style\": {},\n    \"\\\"1\\\",\": \"\",\n    \"width:\": \"\",\n    \"\\\"30vw\\\",\": \"\",\n    \"margin:\": \"\",\n    \"\\\"0\": \"\",\n    \"10px\\\",\": \"\",\n    \"border:\": \"\",\n    \"\\\"1px\": \"\",\n    \"solid\\\"}}\": \"\"\n  }, mdx(\"span\", {\n    parentName: \"div\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"891px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/ed0ea79bc4a3a9e6ab9c10c036bd2bb2/8e5b9/6.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"55.5984555984556%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABN0lEQVQoz5VSsY6CQBBdBSKCP0CCBZAYY4JRIpyGSENxMZEENXRoYkdH4YWvsOZ3391sbhtdvaN42d2Zt2/fzA6bz+ewLAvj8Ri2bf8LxJ9Opzgej8jzHE3T4H6/o65rMEoyxjpD13VkWcYFi6JAVVW4Xq9g5IwI/X4fvV6Pg85iFRA5ETcMA+v1GmEYYrVaYblcoixLMCpBJiBi9NArh4vFAlEUIY5jUOvO57NccDAYwHVdTqJL5OZRcDgcIggC7pAEfd/H5XKRC45GI0wmE07cbDb8LHM4m804j0AGXgrSXlEUaJoGVVWlJVOeQFyqiGK73e59D99BUVR+xzRNOI7zLNgV9FmPH5amqXxs/oLooed5v3B5P2+3L7DD4YD9fo8kSTphu93+jMwHkvSTj86pOKFtW3wDsb8XgmO5AysAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"6\",\n    \"title\": \"6\",\n    \"src\": \"/static/ed0ea79bc4a3a9e6ab9c10c036bd2bb2/8e5b9/6.png\",\n    \"srcSet\": [\"/static/ed0ea79bc4a3a9e6ab9c10c036bd2bb2/2c191/6.png 259w\", \"/static/ed0ea79bc4a3a9e6ab9c10c036bd2bb2/86b01/6.png 518w\", \"/static/ed0ea79bc4a3a9e6ab9c10c036bd2bb2/8e5b9/6.png 891w\"],\n    \"sizes\": \"(max-width: 891px) 100vw, 891px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), \"\\n  \", mdx(\"div\", {\n    parentName: \"div\",\n    \"style\": {},\n    \"\\\"1\\\",\": \"\",\n    \"width:\": \"\",\n    \"\\\"30vw\\\",\": \"\",\n    \"margin:\": \"\",\n    \"\\\"0\": \"\",\n    \"10px\\\",\": \"\",\n    \"border:\": \"\",\n    \"\\\"1px\": \"\",\n    \"solid\\\"}}\": \"\"\n  }, mdx(\"span\", {\n    parentName: \"div\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"891px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/c39a10b4f63bbc25b6545c78aeb2c487/8e5b9/7.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"55.5984555984556%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAAB/0lEQVQoz42SXW8SURCGz65x92wJqdH4N0ATDWiMNzVYUxFTaAsFW9ryjba1pmnxKzUxXhp/IBdccUFkAWHp7rLyOnu2fFR74Ukm78lkz7PzzgxjjOF/QpYkocE7QbjHcRyh4/H4UjDlaRzK802KlKfLa7i+FIPyIgNlhXLRNOUS4JFVsCcJhAtHsC0TlmVNgfOH8b1jaJVP4PkTaOWPQvn2AbT9L9OcRrqwcwQ5/wEPz37AsS2MRqOrK1RTZXD6mG8dkL4DT7+GmtgD36V79hA8R5qpQNsogKX3Eap9Q1dv42e7jW63O41Op4N+v0/A+C74ZgUC7OpaDmrsFYHpHi+S3RKUSA78WRJseQOh6ims8yGGwyFs2xbWJ+pWzXj2LbTSe2iFU6GisiRBcse4Fc/hwaMoAuEo/OslsEIN4bPvGNPD33O9m+/jzPL2oafpKtSXW1Azb+BLZHE7soIbj5ewEMuAJcsInXyFRdV1ez1hczKcCdiz7EJSJU/X85AWb4LJ12gFOFnwiZBVLtbm7r37ME0Tbephq9VCj8C6rmMwGFxMmaxp1c/QijVPybrkX7xiDz0NBgICUK/X0Wg00Gw2qVJd/MAbyuqOGIiaLHpKE5Z8/guQNAPKsgcMeottGAYBfokKh8b5dDhs9lC6BPinwr+A7nEhxsCAbTrT3B+klQoN8kuZzQAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"7\",\n    \"title\": \"7\",\n    \"src\": \"/static/c39a10b4f63bbc25b6545c78aeb2c487/8e5b9/7.png\",\n    \"srcSet\": [\"/static/c39a10b4f63bbc25b6545c78aeb2c487/2c191/7.png 259w\", \"/static/c39a10b4f63bbc25b6545c78aeb2c487/86b01/7.png 518w\", \"/static/c39a10b4f63bbc25b6545c78aeb2c487/8e5b9/7.png 891w\"],\n    \"sizes\": \"(max-width: 891px) 100vw, 891px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"))), mdx(\"hr\", null), mdx(\"h3\", null, \"2. \\u652F\\u6301\\u5907\\u6CE8\"), mdx(\"p\", null, \"\\u53F3\\u4E0B\\u89D2\\u63A7\\u5236\\u6309\\u94AE\\uFF0C\\u6253\\u5F00\\u6F14\\u793A\\u6A21\\u5F0F\\u5373\\u53EF\\u5728\\u5E95\\u90E8\\u770B\\u5230\\u5907\\u6CE8\\u4FE1\\u606F\"), mdx(\"div\", {\n    \"style\": {},\n    \"\\\"50vw\\\",\": \"\",\n    \"margin:\": \"\",\n    \"\\\"0\": \"\",\n    \"10px\\\",\": \"\",\n    \"border:\": \"\",\n    \"\\\"1px\": \"\",\n    \"solid\\\"}}\": \"\"\n  }, mdx(\"span\", {\n    parentName: \"div\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"891px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/ed0ea79bc4a3a9e6ab9c10c036bd2bb2/8e5b9/6.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"55.5984555984556%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAABN0lEQVQoz5VSsY6CQBBdBSKCP0CCBZAYY4JRIpyGSENxMZEENXRoYkdH4YWvsOZ3391sbhtdvaN42d2Zt2/fzA6bz+ewLAvj8Ri2bf8LxJ9Opzgej8jzHE3T4H6/o65rMEoyxjpD13VkWcYFi6JAVVW4Xq9g5IwI/X4fvV6Pg85iFRA5ETcMA+v1GmEYYrVaYblcoixLMCpBJiBi9NArh4vFAlEUIY5jUOvO57NccDAYwHVdTqJL5OZRcDgcIggC7pAEfd/H5XKRC45GI0wmE07cbDb8LHM4m804j0AGXgrSXlEUaJoGVVWlJVOeQFyqiGK73e59D99BUVR+xzRNOI7zLNgV9FmPH5amqXxs/oLooed5v3B5P2+3L7DD4YD9fo8kSTphu93+jMwHkvSTj86pOKFtW3wDsb8XgmO5AysAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"6\",\n    \"title\": \"6\",\n    \"src\": \"/static/ed0ea79bc4a3a9e6ab9c10c036bd2bb2/8e5b9/6.png\",\n    \"srcSet\": [\"/static/ed0ea79bc4a3a9e6ab9c10c036bd2bb2/2c191/6.png 259w\", \"/static/ed0ea79bc4a3a9e6ab9c10c036bd2bb2/86b01/6.png 518w\", \"/static/ed0ea79bc4a3a9e6ab9c10c036bd2bb2/8e5b9/6.png 891w\"],\n    \"sizes\": \"(max-width: 891px) 100vw, 891px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(Notes, {\n    mdxType: \"Notes\"\n  }, mdx(\"p\", null, \"\\u8FD9\\u91CC\\u662F\\u6CE8\\u91CA\")), mdx(\"hr\", null), mdx(\"h3\", null, \"3. \\u652F\\u6301 MDX \\u683C\\u5F0F\"), mdx(\"div\", {\n    style: {\n      display: \"flex\",\n      marginTop: \"30px\"\n    }\n  }, mdx(\"div\", {\n    style: {\n      flex: \"1\",\n      width: \"40vw\",\n      margin: \"0 10px\"\n    }\n  }, mdx(\"ol\", null, mdx(\"li\", null, \"\\u7528 React \\u5199\\u6587\\u6863\\u662F\\u4EC0\\u4E48\\u4F53\\u9A8C~~\"), mdx(\"li\", null, \"\\u66F4\\u5F3A\\u7684\\u8868\\u73B0\\u529B\"))), mdx(\"div\", {\n    style: {\n      flex: \"1\",\n      width: \"40vw\",\n      margin: \"0 10px\"\n    }\n  }, mdx(\"div\", {\n    style: {\n      marginLeft: 20\n    }\n  }, mdx(ChatBoxItem, {\n    width: \"10em\",\n    side: \"left\",\n    mdxType: \"ChatBoxItem\"\n  }, \"\\u76D6\\u623F\\u5B50\\u600E\\u4E48\\u9009\\u65BD\\u5DE5\\u961F \\uD83D\\uDEA7 \\uFF1F\"), mdx(ChatBoxItem, {\n    width: \"10em\",\n    side: \"right\",\n    mdxType: \"ChatBoxItem\"\n  }, \"\\u9760\\u8C31\\u3002\")))), mdx(\"hr\", null), mdx(\"h3\", null, \"3. \\u652F\\u6301\\u4EE3\\u7801\\u683C\\u5F0F\"), mdx(FullScreenCode, {\n    mdxType: \"FullScreenCode\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import React from 'react';\\nfunction App() {\\n  return (<div>Hallo!</div>);\\n}\\nexport default App;\\n\"))), mdx(\"hr\", null), mdx(\"h1\", null, \"Thank You\"), mdx(\"div\", {\n    style: {\n      fontSize: \".5em\"\n    }\n  }, \"/ ** \\u968F\\u4FBF\\u5199\\u5199 \\xB7 Ubug ** /\"));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"在 Gatsby 中添加幻灯片演示","date":"2020-03-19 21:16:31","description":null,"tech":null,"slug":"add-slides-to-gatsby"},"fields":{"slug":"/slides/skills/add-slides-to-gatsby","theme":"dark","isSlide":true}}}],"totalCount":8}},"pageContext":{"isCreatedByStatefulCreatePages":true}}}